JSX 生成dl dd dt

[zwhu]

jsx 中允许使用 map 方法动态生成子组件，如下所示

  render: function() {
    var results = this.props.results;
    return (
      <ol>
        {results.map(function(result) {
          return <li key={result.id}>{result.text}</li>;
        })}
      </ol>
    );
  }

{...}包裹的语句块中实际返回的是一个子组件的集合，[<li>...</li>,....,<li>..</li>]，之后会被babel转换成

  React.createElement('ol', {}, results.map(function(result) {
          return React.createElement('li', {key: result.id},result.text)
        })
 )

这样就可以动态生成子组件，但是没法解决生成dl组件的问题啊：

  render: function() {
    var results = this.props.results;
    return (
      <dl>
        {results.map(function(result) {
          return (<dd>{result.text}</dd><dt>{result.content}</dt>)
        })}
      </dl>
    );
  }

一个return语句中只允许返回一个子节点，so，这种方法是行不通的。但是jsx允许返回组件的集合,例如[<div></div>,<div></div>]，所以我们可以在map中返回一个数组。

  render: function() {
    var results = this.props.results;
    return (
      <dl>
        {results.map(function(result) {
          return ([<dd>{result.text}</dd>,<dt>{result.content}</dt>])
        })}
      </dl>
    );
  }