从字符串动态渲染组件：ReactJS

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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.

所有其他代码都可以正常工作。但是此组件不起作用。我怎样才能解决这个问题？

回答：

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

像这样：

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

因为JSX将获得编译成React.createElement(Component, props,

...children)和Component将是一个字符串，如果它的HTML标签，否则反应成分。

因此，如果您通过React.createElement("Species", props,

...children)，react会将其视为html标签而不是react组件。

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

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

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

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

以上是 从字符串动态渲染组件：ReactJS 的全部内容， 来源链接： utcz.com/qa/428490.html

回到顶部