如何用react做一个表格

1、首先使用React.createClass方法创建一个组件；

2、在render中通过React.DOM创建table、tr、tbody标签；

3、在tr标签中使用map方法将数组中的数据输出到th标签中；

4、同样的使用map方法输出表格内容到td标签中即可。

代码如下：

Excel组件

var Excel = React.createClass({
    displayName:'Excel',
    getInitialState:function(){
        return {
            data:this.props.initialdata
        }
    },
    render:function(){
        return React.DOM.table({className:"table"+" "+"table-bordered"},//多个类用拼接
                React.DOM.thead(null,
                    React.DOM.tr(null,
                        this.props.headers.map(function(title,idx){
                        //map()方法，将数组的值传入回调函数
                        // arr.map(function(currentValue，index，arr),thisValue) 
                        //参数说明 function(currentValue,index,arr) 必须，函数，
                        //数组中的每个元素都会执行这个函数函数参数 函数参数 
                        // currentValue 必须 当前元素值 index 可选 
                        // 当前元素的索引值 arr 可选 当前元素属于的数组对象。
                            return React.DOM.th({key:idx},title);
                       })
                    )
                ),
                React.DOM.tbody(null,this.state.data.map(function(row,idx){
                    return React.DOM.tr({key:idx},
                        row.map(function(cell,idx){
                            return React.DOM.td({key:idx},cell)
                        })
                    )
                }))
            );
    }
});
var headers = ["book","author","lanage","sales"];
var data = [["math","jack","en","23"],["english","alice","23","en"]];
ReactDOM.render(React.createElement(Excel,{
    headers:headers,
    initialdata:data
}),document.getElementById('ex6'));

效果图：