在React JS中动态创建列

Question

I have the following data in my code:

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

render function:

............
............
<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>

What i want to do is to dynamically create the TableHeaderColumn s because there could be more or less col keys in my data array, such as col3 , col4 , etc. I tried to integrate a for-loop inside render but it didn't do the work (im not sure how to do that in react).

Could anyone suggest how to do that dynamically? Thanks!

Answer 1

Use 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

First, you would have to store your dynamic columns somewhere, I'll assume these columns are coming from a parent component, so I will set them as default props.

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

Regarding the key, React encourages you to have a unique ID for each instance of a component, sort of speak. If you don't have it you could work around it with an index when iterating using map function. Like this:

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

Please check documentation for more reference:

• React Lits & Keys