我试图像这样动态地调用一个组件
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}/>;