Table 创建更多 table 而不是新行

Question

我正在尝试使用 objects 的单个数组来填充我的 React Bootstrap table 数据。我想为每个 obj 创建一个新行，并为每个列创建一个 table header，但它会创建新的 tables。

我试图将地图函数 ("this.props.data.map((person, key) =>") 移动到 called/rendered 和其他几个地方，所以它不会多次调用组件，但我很难语法。

const columns = [{
    dataField: 'id',
    text: 'ID'
}, {
    dataField: 'firstName',
    text: 'First Name'
}, {
    dataField: 'lastName',
    text: 'Last Name',
    sort: true
}, {
    dataField: 'birthDate',
    text: 'Birth Date'
}, {
    dataField: 'email',
    text: 'Email'
}];

    render(){
        return(
            <div>
                {this.props.data.map((person, key) =>
                    <div key={key} >
                        <BootstrapTable
                            hover
                            condensed={true}
                            bootstrap4={true}
                            keyField='id'
                            data={person}
                            columns={columns}
                            />
                    </div>
                )}
            </div>
        );
    }

Answer 1

您不需要通过数组进行映射。您需要做的就是将 this.props.data 放入 data 字段。

data={this.props.data}

然后，只要 firstName, lastName 等键在对象中，它就应该为您打印 table。

假设您的数组如下所示：

[{firstName: 'Bob', lastName: 'Sagget',...}, {firstName: 'George', lastName: 'Bobbish',... }]

完整 return 语句：

return(
        <div>
             <BootstrapTable
              hover
              condensed={true}
              bootstrap4={true}
              keyField='id'
              data={this.props.data}
              columns={columns}
              />
        </div>
    );

Table 创建更多 table 而不是新行

Table creating more table rather than a new row

reactjs

react-bootstrap

bootstrap-4

react-bootstrap-table