将函数分配给 dataFormat BootstrapTable

Question

如果你能帮助我，是否可以在使用 js map 时将函数分配给 react-bootstrap-table dataFormat ...

<BootstrapTable data={this.state.users} data-url="data.json" hover pagination={true}
                search ClassName="table" options={options} 
                data-response-handler="responseHandler" exportCSV={true}>
{
   this.state.userAdminGrid.columns.map((vis, index) => {
   <TableHeaderColumn dataSort key={index} 
                      dataField={vis.field} 
                      isKey={vis.isKey} 
                      hidden={!vis.checked}
                      dataAlign="center" 
                      dataFormat={vis.fieldFormat}>
           {vis.fieldDescription}
   </TableHeaderColumn>
})
}
</BootstrapTable>

this.state.userAdminGrid.columns 看起来像这样，基本上只有最后一列需要 dataFormat，我希望在其中分配名为 isActiveFormat

的函数

columns: Array(6)
0: {fieldId: 1, field: "userId", fieldDescription: "Id", checked: false, order: 9, …}
1: {fieldId: 4, field: "surename", fieldDescription: "Prezime", checked: true, order: 1, …}
2: {fieldId: 3, field: "name", fieldDescription: "Ime", checked: true, order: 2, …}
3: {fieldId: 2, field: "username", fieldDescription: "Username", checked: true, order: 5, …}
4: {fieldId: 5, field: "roleDescription", fieldDescription: "Rola", checked: true, order: 6, …}
5:
   checked: true
   field: "isActive"
   fieldDescription: "Aktivan"
   fieldFormat: "isActiveFormat"
   fieldId: 6
   isKey: false
   order: 8
__proto__: Object
length: 6
__proto__: Array(0)

函数 isActiveFormat 看起来像

isActiveFormat(cell) {
    console.log("I got in");
    return (
        <Toggle on={'Aktivan'} off={'Neaktivan'} size="xs" offstyle="danger" active={cell} />
    );
}

这是一个结构，因为我在数据库中保留了网格列，每个用户都可以选择他希望看到的顺序和列，isActive列是简单的布尔值，我想在其中使用react-bootstrap-toggle控制...

Answer 1

你可以这样调用函数 dataFormat={this[vis.fieldFormat]}> 或 dataFormat={() => this[vis.fieldFormat]()}>

将函数分配给 dataFormat BootstrapTable

Assigning function to dataFormat BootstrapTable

reactjs

react-bootstrap-table