javascript - 动态组件名称-React

Question

我有三个组成部分:

const Comp0 = () => <div>1</div>;
const Comp1 = () => <div>2</div>;
const Comp2 = () => <div>3</div>;

我也有一个类，有状态:

state = { activeComponent: 0 }

这activeComponent可以由用户更改为 1 , 2或 0 .

在渲染中，我有:

return (
   {React.createElement(`Comp${this.state.activeComponent}`)};
}

它应该工作...理论上。但是 - 我遇到了一个非常奇怪的错误。两个错误。

1. Warning: <Comp0 /> is using uppercase HTML. Always use lowercase HTML tags in React.

2. Warning: The tag <Comp0> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

它们怎么可能同时出现？

Answer 1

您可以像这样简单地呈现动态标签

const Tag = `Comp${this.state.activeComponent}`;
return (
   <Tag />
}

根据 docs :

You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first.

在您的情况下，它不起作用，因为您将字符串名称传递给 React.createElement，而对于 React 组件，您需要像这样传递组件

React.createElement(Comp0);

对于普通的 DOM 元素，您将传递一个字符串，例如

React.createElement('div');

自从你写了

`Comp${this.state.activeComponent}`

你得到的是

React.createElement('Comp0')

react 不是很容易理解，它会发出警告

Warning: <Comp0 /> is using uppercase HTML. Always use lowercase HTML tags in React.