Question

我想用div包装一个ReactJS组件，但是我想每隔5个项包装一次elemnt。我已经管理（with little help）每5个项目添加换行符。

这是代码：

    int[][] states = new int[][] {
            new int[] { android.R.attr.state_enabled}, // enabled
            new int[] {-android.R.attr.state_enabled}, // disabled
            new int[] {-android.R.attr.state_checked}, // unchecked
            new int[] { android.R.attr.state_pressed}  // pressed
    };



    int[] colors = new int[] {
            getResources().getColor(R.color.my_color),
            getResources().getColor(R.color.my_color),
            getResources().getColor(R.color.my_color),
            getResources().getColor(R.color.my_color)
    };

    ColorStateList myList = new ColorStateList(states, colors);

    ProgressBar simpleProgressBar = (ProgressBar) findViewById(R.id.recording_progress);

    simpleProgressBar.setProgressTintList(myList);

这是一个JSFIDDLE

我仍然想使用.map函数循环遍历数组，它更方便直观。

问题是如何用var Item = React.createClass({ render: function() { return <span> {this.props.num}</span>; } }); var Hello = React.createClass({ render: function() { var items = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ]; return <div>{items.map(function (i,index) { if (index % 5 === 0) { return [ <br />, <Item key={i} num={i} /> ]; } return <Item key={i} num={i} />; })}</div>; } }); ReactDOM.render( <Hello name="World" />, document.getElementById('container') );而不是<div>每5行包裹它？

抱歉这里的混淆是一个解释：想：

<br>

我有什么：

<div>0 1 2 3 4</div>
<div>5 6 7 8 9</div>

Answer 1

Check out this JSFiddle.它将输入数组分成五个批次，并将每个批次包装在div中。这些div个 - 每个都有五个Item个组件作为子项 - 都包含在另一个div中，return。

这里是render功能：

render: function() {
    var items = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 ];
    var fives = [];
    while(items.length) {
        fives.push(items.splice(0, 5));
    }
    return (
        <div>
            {fives.map(function (five, index) {
                return (
                    <div key={index}>
                        {five.map(function (item, index) {
                            return (<Item key={index} num={item} />);
                        })}
                    </div>
                );
            })}
        </div>
    );
}

条件上的html组件的jsx循环包装器

1 个答案: