react.js 循环输出问题

Question

var Demo = React.createClass({
    getInitialState:function(){
        return {lenght:3}
    },
    render:function(){
        return (
            <div>
                <div className="item">gagaag</div>
            </div>
        )
    }
})
React.render(<Demo/>,document.getElementById('example'))

我想当输出3次 <div className="item">gagaag</div> 不知道for循环怎么写 有之前写过的么 可以给点指点么

Answer 1

我想，你要的是这个效果吧

var Demo = React.createClass({
    getInitialState:function(){
        return {lenght:3}
    },
    render:function(){
        var items = [];
        for (var i = 0; i < 3; i++) {
            items.push(<div className="item">gagaag</div>);
        }

        return (
            <div>
                {items}
            </div>
        )
    }
})
React.render(<Demo/>,document.getElementById('example'))

Answer 2

jsx里面不能用for循环，因为for循环不是表达式。但你可以用Array::map方法，注意给返回的每一个组件设置一个唯一的key。

var Demo = React.createClass({
    getInitialState:function(){
        return {lenght:3}
    },
    render:function(){
        let items = [{id:1, name:'foo'}, {id:2, name:'bar'}];
        return (
            <div>
                {
                    items.map(function (item) {
                        return <div className="item" key={item.id}>{item.name}</div>
                    })
                }
            </div>
        )
    }
})
React.render(<Demo/>,document.getElementById('example'))