如何動態地向對象添加反應圖標

Question

我正在為這個網站構建一個手風琴，但我無法在每個手風琴標題的標題中添加反應圖標。 我在下面使用這種方法來動態添加手風琴選項卡，其內容是內容對象中的 3 個組件。

我什至如何動態地為每個手風琴標簽標題添加一個簡單的 h2 標簽

const content = {
  'Blogs': <Blogs />,
  'icon': <h2>hi</h2>,
  'Webinars': <Webinars />,
  'Podcast': <Podcasts />,
}

const AccordionSingle = (name) => {
  const [isOpen, setOpen] = useState(false);

  return (
    <div className="accordion-wrapper">
      <div
        className={`accordion-title ${isOpen ? "open" : ""}`}
        onClick={() => setOpen(!isOpen)}
      >
        {name}
      </div>
      <div className={`accordion-item ${!isOpen ? "collapsed" : ""}`}>
        <div className="accordion-content">{content[name]}</div>
      </div>
    </div>
  );
};

const Resources = (props) => {

  return (
    <>
      <Navbar />
      <div>
        {
          ['Webinars', 'Blogs', 'Podcast'].map(d => AccordionSingle(d))
        }
      </div>
    </>
  );
}

export default Resources;

Answer 1

如果我猜對了，您想為手風琴中的所有標題添加圖標（或任何其他文本，例如 h2）。 從那時起，不清楚為什么要將 h2 添加到項目列表中。 它應該添加到包含標題的 div 中：

<div
  className={`accordion-title ${isOpen ? "open" : ""}`}
  onClick={() => setOpen(!isOpen)}
>
  <h2>text</h2>{name}
</div>

此外，我建議將您的項目存儲為一個數組，因為它實際上是一個具有自己屬性的項目列表。 它可能看起來像這樣：

const items = [
  { 
    name: "Blogs",
    content: <Blogs />,
    icon: <FaPenFancy /> // it is just an example from react-icons
  },
  ...
]

這樣您以后就可以將圖標用作標題的一部分，而不是上面顯示的。

這樣最好通過將整個項目對象發送到 AccordionSingle props 來更新代碼：

// instead of:
{
  ['Webinars', 'Blogs', 'Podcast'].map(d => AccordionSingle(d))
}
// should be:
  items.map(d => AccordionSingle(d))

// and then extract all properties inside you AccordionSingle props:
const AccordionSingle = ({name, content, icon}) => {
  ...
}