wenkai

动态JSX标签

wenkai · 2016-12-23翻译 · 506阅读 原文链接

很多使用 JSX 的 React 开发者不知道如何创建一个 动态 JSX 标签。我们想把标签名当做一个变量,而不是把inputtextareadivspan(或任何其它标签)写死。

让我们看一看:

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"
/>;

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

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

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

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

Original and compiled JSX code

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

译者wenkai尚未开通打赏功能

相关文章