React.js - ForEach作为一流的组件？

Question

我听说过react-templates,但我仍然想知道有可能制作出一流的ForEach组件.

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

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

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

这是我通过传递道具的第一次认真尝试:

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箭头功能显着提高可读性.一组曲线与return(以及可能还有一个.bind(this)如果你this在循环内引用)一起消失.

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

这对于帮助执行map行的语法笨拙有很大帮助.

Answer 1

我的方法是期望ForEach为每个项目调用一个函数子函数，并简单地将一个反应元素注入到渲染中。

它的用法如下：

render: function() {
  return (
    <ForEach items={['foo', 'bar', 'baz']}>
      {function (item) {
        return (
          <Element>{item}</Element>
        )
      }/*.bind(this)*/} // optionally use this too
    </ForEach>
  )
}

如果您使用ES6 箭头函数，这看起来会更好：

render() {
  return (
    <ForEach items={['foo', 'bar', 'baz']}>
      {(item) => // bind is not needed with arrow functions
        <Element>{item}</Element>
      } 
    </ForEach>
  )
}

现在，实际实施ForEach：

var ForEach = React.createClass({
   getDefaultProps: function(){
     return {
       element: 'ul',
       elementProps: {}
     };
   },
   render: function(){
      return React.createElement(
        // Wrapper element tag
        this.props.element,

        // Optional props for wrap element
        this.props.elementProps,

        // Children
        this.props.items.map(this.props.children, this)
      );
   }
});

很简单！我发现的一个警告是keyprop 需要通过迭代器函数手动设置（可能使用key={index}）

看看我的基本示例