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中有没有办法做到这一点？

Answer 1

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

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

Answer 2

您已经可以做到，变量应该以大写字母开头：

function getElementTag(type) {
  switch (type) {
    case 'textarea':
      return 'textarea'
    default:
      return 'input'
  }
}

function App() {
  const TagName = getElementTag('textarea');
  return (
    <div className="App">
      <TagName value="you can already do it" />
    </div>
  );
}

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

2 个答案: