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.item集的克隆元素，但因为{this.props.item}是在其他一些封闭组件的上下文中进行评估的render {1}}方法，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

这有助于解决SELECT ELC.* FROM External_Blk_Itm_Contracts ELC INNER JOIN BUDTERMINALS BT ON BT.MBFTERMINALNAME = ELC.TerminalName AND ELC.ContractName = '00-000' INNER JOIN BudCustomers BCUST ON BCUST.LegalName = ELC.CustomerName LEFT JOIN BUDCONTRACTS BCON ON BCON.CONTRACTNAME = ELC.ContractName AND BCON.TERMINALID = BT.TERMINALID AND BCON.CUSTOMERID = BCUST.CustomerID WHERE BCON.CONTRACTID IS NULL行的语法笨拙问题。

Answer 1

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

可以使用这样的东西：

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

如果您使用ES6 Arrow Functions：

，这会更好看

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)
      );
   }
});

非常简单！我发现的一个警告是key道具需要由itterator函数手动设置（可能使用key={index}）

查看我的basic example

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

1 个答案: