我试图像这样动态调用组件
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组件。因此,如果您传递
React.createElement("Species", props, ...children)
,react会将其视为html标签而不是react组件。更新:
您可以做一件事,为每个组件创建一个映射,如下所示:
const Map = {
"componenet1": Component1,
"componenet2": Component2
}
现在,您可以使用字符串键访问组件,如下所示:
let name = "componenet1";
let Tagname = Map[name];
<Tagname {...attrs}/>;
关于reactjs - 从字符串: ReactJS动态呈现组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48863490/