动态JSX标签

译者：wenkai

原文链接

很多使用 JSX 的 React 开发者不知道如何创建一个 动态 JSX 标签。我们想把标签名当做一个变量，而不是把input、textarea、div、span（或任何其它标签）写死。

让我们看一看：

const input = this.props.long ? <textarea
  onChange={this.props.onChange}
  className=""make-this-pretty""
  id=""important-input""
  name=""important-input""
/> : <input
  onChange={this.props.onChange} 
  className=""make-this-pretty""
  id=""important-input""
  name=""important-input""
/>;

你可以看到上面的代码有很多重复。唯一的区别是标签名input和textarea。我们要怎么做呢？其实很简单：

const Tag = this.props.long ? ""textarea"" : ""input""

const input = <Tag 
  onChange={this.props.onChange}
  className=""make-this-pretty""
  id=""important-input""
/>;

注意你的变量名必须以大写字母开头。 小写的变量名会直接作为字符串编译。如下图，右边的是 JSX 的编译结果：

就是这样。不是魔法 :).