react 怎么获取表格_如何用react做一个表格

如何用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'));

效果图：

更多React相关技术文章，请访问React答疑栏目进行学习！