javascript - 如何使用道具制作反应js元素？

Question

我在这样的反应js中有一个功能元素，

function FilterOptions() {
  const [isShown, setIsShown] = useState(false);
  return (
    <div className="filter__options">
      {["Category", "Design", "Size", "Style"].map((ourOption) => (
        <div
          onMouseEnter={() => setIsShown(true)}
          onMouseLeave={() => setIsShown(false)}
          className="filter__options__container"
        >
          <div className="filter__options__button">
            {ourOption}
          </div>
          {isShown && <div className="filter__options__content">  Here I want to return the element using props </div>}
        </div>
      ))}
    </div>
  );
}

我创建了一个名为 Category.js、Design.js、Size.js、Style.js 的文件。现在我想使用道具，这样我就可以像这样连接<{ourOption}> <{ourOption}/>，这样这将返回元素。知道该怎么做吗？

标签： javascriptreactjsstring-concatenation

Answer 1

您可以迭代组件数组而不是字符串

{[Category, Design, Size, Style].map((Component) => (
    <Component/>
);