如何使用道具制作一个反应js元素？答案

【问题标题】：How to make a react js element by using props?如何使用道具制作一个反应js元素？
【发布时间】：2020-12-16 06:19:39
【问题描述】：

我在这样的 react 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}/> 连接，这样这将返回元素。知道该怎么做吗？

【问题讨论】：

标签： javascript reactjs string-concatenation

【解决方案1】：

Choosing the Type at Runtime

首先：导入使用的组件并创建查找对象

import Category from 'Category';
import Design from 'Design';
import Size from 'Size';
import Style from 'Style';
// ... other imports

const components = {
  Category,
  Design,
  Size,
  Style,
  // ... other mappings
};

第二：查找要渲染的组件

function FilterOptions() {
  const [isShown, setIsShown] = useState(false);
  return (
    <div className="filter__options">
      {["Category", "Design", "Size", "Style"].map((ourOption) => {
        const Component = components[ourOption];
        return (
          ...
            <div className="filter__options__button">
              <Component />
            </div>
          ...
        ))}}
    </div>
  );
}

或者，您可以直接在要映射的数组中导入并指定它们。

function FilterOptions() {
  const [isShown, setIsShown] = useState(false);
  return (
    <div className="filter__options">
      {[Category, Design, Size, Style].map((Component) => (
        ...
          <div className="filter__options__button">
            <Component />
          </div>
        ...
      ))}
    </div>
  );
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

我认为我们做不到。我无法做到这一点。而且我希望它是字符串，因为我还必须在一个地方返回一个字符串。
哦好吧@Adithya我明白了。感谢您的帮助
很高兴能提供帮助，heres 一个沙盒，显示您可以迭代组件。如果你还想要名字，你可以遍历对象数组并在每个对象中都有名字

【解决方案3】：

我会以react document 这样做

//create components array
const components = {
    photo: Category,
    video: Design
    .....
};

{
    Object.keys(components).map((compName) => {
        const SpecificSection = components[compName];
        return <SpecificSection />;
    })
}

【讨论】：

【解决方案4】：

这是一个您可以使用的小示例代码。使用直接组件而不是尝试通过字符串来确定。

const Comp1 = () => {
  return <p>Comp1 Here</p>
}

const Comp2 = () => {
  return <p>Comp 2 Here</p>
}

export default function App() {
  return (
    <div className="App">
      {[Comp1, Comp2].map(Komponent => { 
        // use Komponent to prevent overriding Component
        return <Komponent></Komponent>
      })}
    </div>
  );
}

【讨论】：