creation js中的动态列创建

Question

我的代码中有以下数据：

this.state.data = [
                   {"col0":"Service Port","col1":80,"col2":8080}
                   {"col0":"Service Name","col1":"--","col2":"--"}               
                  ]

render函数：

............
............
<div className="row">
                    <div className="col-lg-12">
                        <CollapsiblePanel name="Services"
                                          bsStyle="info"
                                          open>
                            <BootstrapTable data={this.state.data}
                                            striped
                                            hover>
                                {/*{
                                    for(var i = 0; i < this.state.data.length; i++) {
                                        var col = 0;
                                        for(var j = 0; j < this.state.data[i].length; j)
                                        <TableHeaderColumn 
                                            className="tableHeader"
                                            dataField={this.state.col++}
                                    }
                                }*/}
                                <TableHeaderColumn
                                    className="tableHeader"
                                    dataField="col0"
                                    isKey
                                    width="40%"></TableHeaderColumn>
                                <TableHeaderColumn
                                    className="tableHeader"
                                    dataField="col1"
                                    width="40%"></TableHeaderColumn>
                                <TableHeaderColumn
                                    className="tableHeader"
                                    dataField="col2"
                                    width="40%"></TableHeaderColumn>
                            </BootstrapTable>
                        </CollapsiblePanel>
                    </div> 
                </div>

我想要做的是动态地创建TableHeaderColumn，因为我的data数组中可能有或多或少的col键，比如col3、col4等等。我试图在呈现中集成一个for-loop，但它没有完成这项工作(我不确定如何在react中这样做)。

有人能建议如何动态地做到这一点吗？谢谢!

Answer 1

使用Array.prototype.map

<BootstrapTable data={this.state.data}
  striped
  hover>
  {
    this.state.data.map((item) => {
      return (
        <TableHeaderColumn
          className="tableHeader"
          dataField={item.col0}
          isKey
          width="40%" />
      );
    }
  }
</BootstrapTable>

Answer 2

首先，您必须将动态列存储在某个地方，我将假设这些列来自父组件，因此我将将它们设置为默认支持。

    class MyOwnComponent extends from React.Component{
        static defaultProps = {
            cols = [
                {
                    className: "tableHeader",
                    dataField: "col0",
                    width: "40%"
                },
                {
                    className: "tableHeader",
                    dataField: "col1",
                    width: "40%"
                },
                {
                    className: "tableHeader",
                    dataField: "col2",
                    width: "40%"
                }    
            ]        
        }

        render(){
            return(
                    <div className="row">
                        <div className="col-lg-12">
                            <CollapsiblePanel name="Services"
                                            bsStyle="info"
                                            open>
                                <BootstrapTable data={this.state.data}
                                                striped
                                                hover>
                                    {/*{
                                        for(var i = 0; i < this.state.data.length; i++) {
                                            var col = 0;
                                            for(var j = 0; j < this.state.data[i].length; j)
                                            <TableHeaderColumn 
                                                className="tableHeader"
                                                dataField={this.state.col++}
                                        }
                                    }*/}
                                    {
                                        this.props.cols.map(function(item){
                                        return (
                                            <TableHeaderColumn className={item.className} dataField={item.dataField} width={item.width}/>
                                        )}
                                    )}                                
                                </BootstrapTable>
                            </CollapsiblePanel>
                        </div> 
                    </div>
            )
        }
    }

关于键，React鼓励您对组件的每个实例都有一个唯一的ID，可以这样说。如果没有它，那么在使用map函数进行迭代时，可以使用索引来处理它。如下所示：

    this.props.cols.map(function(item, index){
    return (
        <TableHeaderColumn key={index} className={item.className} dataField={item.dataField} width={item.width}/>
    )}

如需更多参考资料，请参阅文件：

• & Keys