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，因为我的col数组中可能有更多或更少的data个键，例如col3，col4等。我尝试在内部渲染中集成for-loop，但它没有完成工作（我不知道如何做出反应）。

有人可以建议如何动态地这样做吗？谢谢！

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}/>
    )}

请查看文档以获取更多参考：

React Lits & Keys

反应js中的动态列创建

2 个答案: