在地图功能中渲染状态并添加一些样式反应js

Question

我想用地图功能添加一些样式，最后在表格中添加项目我使用这个代码

    columnClassNameFormat(fieldValue ) {
    const Event =this.state.Event;
    console.log(Event);

    this.state.Event.events.map(function (item) {
        if (item.event_type === 'A') {

         <span class="label label-danger">{fieldValue}</span>
        }
        else if (item.event_type === 'W') {
        <span class="label label-warning">{fieldValue}</span>
        }
        else if (item.event_type === 'I') {
            <span class="label label-info">{fieldValue}</span>
        } else {
          <span class="label label-info">{fieldValue}</span>
        }
    }).bind(this)


 }

然后我在表格中显示这样的项目

<BootstrapTable data={this.state.Event}  exportCSV title='Infravision-Report' pagination search>
                        <TableHeaderColumn dataField='event_title' isKey={ true }>Discription</TableHeaderColumn>
                        <TableHeaderColumn dataField='time' dataSort={ true }>Date time</TableHeaderColumn>
                        <TableHeaderColumn dataField='event_status' columnClassName={this.columnClassNameFormat } >status</TableHeaderColumn>


                    </BootstrapTable>

但它不起作用并且样式不会添加到项目中

Answer 1

您的地图函数应该有类似的返回语句，

this.state.Event.events.map(function (item) {
        if (item.event_type === 'A') {

         return <span class="label label-danger">{fieldValue}</span>
        }
        else if (item.event_type === 'W') {
        return <span class="label label-warning">{fieldValue}</span>
        }
        else if (item.event_type === 'I') {
           return  <span class="label label-info">{fieldValue}</span>
        } else {
         return  <span class="label label-info">{fieldValue}</span>
        }
    }) .bind(this)