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

时间:2018-05-19 05:14:16

标签: reactjs jsx

我想用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>

但它的工作和风格不能添加到项目

1 个答案:

答案 0 :(得分:0)

你的map函数应该有返回语句,如

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)