如何用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答疑栏目进行学习!