react循环输出问题

Question

var arr = [

        'JavaScript', 'ReactJS', 'React Native', 'AngularJS', 'NodeJS'
    ];
    var arr2 = [
        'one', 'two', 'three', 'four', 'five'
    ];
    var arr3 = [
        'Canvas', 'Three.js', 'CSS3 Animation', 'JQuery Animation', 'SVG'
    ];
    var datas = [];
    datas.push(arr, arr2, arr3);

    var Comp = React.createClass({
        render: function(){
            for(var i = 0; i < datas.length; i++){
                return (
                    <ul>
                        <li>one: {this.props.one[i][0]}</li>
                        <li>one: {this.props.one[i][1]}</li>
                        <li>one: {this.props.one[i][2]}</li>
                        <li>one: {this.props.one[i][3]}</li>
                        <li>one: {this.props.one[i][4]}</li>
                    </ul>
                );
            }
        }
    });

    ReactDOM.render(
        <Comp one={datas} />,
        document.querySelector('.demo')
    );

这个代码为什么不能遍历数组中的值，然后输出呢？如果想要输出数组中的值在对应的位置该怎么做？

Answer 1

再循环里return了，还怎么循环？

Answer 2

for写在return里面，for前面加大括号来表示它是js语句

Answer 3

datas.map(function (item){return <li></li>})这样...

Answer 4

// 假设你了解underscore http://underscorejs.org/ ，如果不了解，用其他方案替代
var arr = [
    'JavaScript', 'ReactJS', 'React Native', 'AngularJS', 'NodeJS'
];
var arr2 = [
    'one', 'two', 'three', 'four', 'five'
];
var arr3 = [
    'Canvas', 'Three.js', 'CSS3 Animation', 'JQuery Animation', 'SVG'
];
var datas = [];
datas.push(arr, arr2, arr3);

var Comp = React.createClass({
    render: function(){
        return (
            <div>
                {_.map(datas, function(value, i){
                    return (
                        <ul key={i}>
                            <li>one: {this.props.one[i][0]}</li>
                            <li>one: {this.props.one[i][1]}</li>
                            <li>one: {this.props.one[i][2]}</li>
                            <li>one: {this.props.one[i][3]}</li>
                            <li>one: {this.props.one[i][4]}</li>
                        </ul>
                    );
                })}
            </div>
        );
    }
});

ReactDOM.render(
    <Comp one={datas} />,
    document.querySelector('.demo')
);