我听说过 react-templates，但我仍然想知道是否可以制作一流的 ForEach 组件。

我的最终目标是让这样的东西更具可读性：

<ul>
  {list.map(function(item, i) {
     return <li>{item}</li>;
   })}
 </ul>

 // instead?
 <ul>
  <ForEach items="{list}">
     <li>{item}</li>
  </ForEach>
 </ul>

这是我通过传递props的第一次认真尝试：

var ForEach = React.createClass({
   render: function(){
      return (
      <ul>
        {this.props.items.map(function(item, i) {
          return React.Children.map(this.props.children, function(child) {
            return React.addons.cloneWithProps(child, {item: item})
         })
        }.bind(this))}
      </ul>
    );
  }
});

var Element = React.createClass({
  render: function(){
    return (
    <li>{this.props.children}</li>
    );
  }
});

// usage within some other React.createClass render:
<ForEach items={['foo', 'bar', 'baz']}>
  <Element>{this.props.item}</Element>
</ForEach>

我遇到的挑战是this指向什么。通过使用调试器单步执行，我可以看到我正在创建带有this.props.itemset 的克隆元素，但是因为{this.props.item}在其他一些封闭组件的render方法的上下文中进行评估，this所以不是克隆Element组件 - 它是ForEach的父元素。

{this.props.item} 将在内部工作，Element.render但这不是我想要的地方 - 我希望能够提供Element一些插入当前项目的表达式。

这在 React 中是不可能的，还是有什么方法可以让ForEach组件将状态（如当前项/索引）传递给嵌套元素？

更新我可以使用 ES6 箭头函数在可读性方面获得显着改进。一组curl消失了，以及return（.bind(this)如果您this在循环内引用，也可能是一个）。

<ul>
  {list.map((item, i) =>
    <li>{item}</li>
  )}
</ul>

这对解决执行mapline的语法笨拙有很大帮助。