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

因为你无法从字符串中动态创建一个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>
     );
 }

Answer 2

你可以这样做：

/** @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组件中，然后将其传递给Child中的props组件。

如果你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'));

你仍然需要稍微调整一下以满足你的要求，但基本上它将孩子划分为容器＆＃34;，我想这就是你要找的东西。

reactjs在map（）中创建动态包装元素

2 个答案: