reactjs 在 map() 中创建动态包装器元素

Question

我有一些问题可能无法很好地理解 ReactJS 以在每五个步骤中创建动态 div 包装器。更具体地说，这里有一个例子：

render() {
    return (
            <div className='holder'>
              {this.props.elements.map(
                (b,n) => 
                  {n%5 == 0 ? '<div class="grid grid-pad">' : ''}
                  <Component param={b} />
                  {n%5 == 0 ? '</div>' : ''}                 
              )}
            </div>
     )
}

结果应如下所示：

<div class='grid grid-pad'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
<div class='grid grid-pad'>
  <div class='child'></div>
  <div class='child'></div>
  ...
</div>
....

因此结果将是每 5 个元素将被包裹在 div。

我知道这不是正确的方法，在这段代码中它实际上会为未关闭的标签产生错误。有什么办法可以实际实现类似的功能。先感谢您。

Answer 1

您可以这样做：

/** @jsx React.DOM */

var Parent = React.createClass({
  getInitialState: function() {
    return {
      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
    }
  },
  render: function() {
    return(
      <div>
        <Child elements={this.state.list} />
      </div>
    );
  }
});

var Child = React.createClass({
  render: function() {
    var itemsList = this.props.elements.map(function(element, index) {
      if (index % 5 == 0) {
        return (
          <div> {element} </div>
        );
      }
    });

    return(
      <div>
        {itemsList}
      </div>
    );
  }
});

React.render(<Parent />, document.getElementById('app'));

您将数据保存在 Parent 组件中，然后将其传递给 props 中的 Child 组件。

如果你这样做 console.log(itemsList) 你可以看到 map() 方法内部发生了什么。

这里是JSFiddle。

编辑：

在你更新你的问题后，这是我快速破解的东西，这不是最好的方法，但它有效：

/** @jsx React.DOM */

var Parent = React.createClass({
  getInitialState: function() {
    return {
      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
    }
  },
  render: function() {
    return(
      <div>
        <Child elements={this.state.list} />
      </div>
    );
  }
});


var Child = React.createClass({
  render: function() {
      var arr_index = -1;
      var itemsList = [];
      var items = this.props.elements.map(function(item, i) {
        if (i % 5 == 0) {
          arr_index += 1
        }
        itemsList.push(<div> {item}, conatiner: {arr_index} </div>)
      });
      return (
        <div>{itemsList}</div>
      );
    }
});

React.render(<Parent />, document.getElementById('app'));

您仍然需要稍微调整一下以满足您的要求，但基本上它将 children 分成 "containers"，我想这就是您要找的东西。

Answer 2

因为您不能像那样从字符串动态创建 React 组件。您只需要手动对子项进行分组，然后将它们作为一个整体添加到 render 方法中的容器中。

这是一个例子：http://jsfiddle.net/wiredprairie/ko8so1mu/。

如果您使用 lodash 之类的东西，您可以使用 take 函数减少下面的代码行数。

render() {
    // make all elements into Components
    var elements = this.props.elements || [];
    var components = elements.map(
        (b) => {
            return <Component param={b} />;
        }
    );

    // then just group into chunks of 5 
    var groups = [];
    var children = [];
    while(components.length > 0) {
        children.push(components.shift());
        if (children.length === 5) {
            groups.push(<div className="grid grid-pad">{children}</div>);
            children = [];
        }
    }
    // remaining children
    if (children.length > 0 ) {
        groups.push(<div className="grid grid-pad">{children}</div>);
    }

    return (
        <div className='holder'>
          { groups }
        </div>
     );
 }

reactjs 在 map() 中创建动态包装器元素

reactjs create dynamic wrapper element in map()

loops

render

reactjs