在map函数中渲染状态并添加一些样式反应js

Question

我想用map函数添加一些样式状态，最后在表格中添加项目我使用此代码

    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

你的map函数应该有return语句，比如

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)