html - 如何在 ReactJS 中动态选择要渲染的元素

Question

我正在编写一个网页，它动态地呈现数据库中的元素，每个元素都有自己的状态。要选择渲染什么元素，我使用了switch-case这样的：

switch (this.state.type) {
  case 'textarea':
    element = <textarea {...this.state} />
    break

  ...

  default:
    element = <input {...this.state} />
}

我想做的是有一种很好的方式来选择渲染哪个元素，如下所示：

switch (this.state.type) {
  case 'textarea':
    tag = 'textarea'
    break

  ...

  default:
    tag = 'input'
}

element = <{tag} {...this.state} />

在 React 中有没有类似的方法？

标签： htmlreactjs

Answer 1

您可以使用React.createElement[1]，其第一个参数是要渲染的元素。

[1] https://reactjs.org/docs/react-api.html#createelement