reactjs - 从字符串 : ReactJS 动态渲染组件

Question

我试图像这样动态调用组件

var Tagname = 'Species';
options.push(<Tagname {...attrs}/>);

我在控制台中收到警告

Warning: <Species /> is using uppercase HTML. Always use lowercase HTML tags in React.
Warning: The tag <Species> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

所有其他代码都工作正常。但这个组件不起作用。我该如何解决这个问题？

Answer 1

是的，您可以动态调用组件，但它应该是组件本身而不是字符串。

像这样:

var Tagname = Species;    //component itself, not string
<Tagname {...attrs}/>;

因为 JSX 将被编译为 React.createElement(Component, props, ...children) ，并且 Component 如果它是 html 标签，则将是一个字符串，否则 react 组件。

因此，如果您传递 React.createElement("Species", props, ...children)，react 会将其视为 html 标签而不是 React 组件。

更新:

您可以做一件事，为每个组件创建一个映射，如下所示:

const Map = {
  "componenet1": Component1,
  "componenet2": Component2
}

现在您可以使用字符串键访问该组件，如下所示:

let name = "componenet1";
let Tagname = Map[name];
<Tagname {...attrs}/>;