Question

我正在使用ReactJS应用程序，该应用程序从API显示填充了航班信息的表格。其中一列称为状态，当航班状态更改时，它会更改值。

例如，我们有一个班机起飞，现在的状态为“登机”，后来的状态为“登机” 我想要实现的是添加一个样式元素，例如用于为颜色或图标添加颜色，但在上不同颜色时等等。因此，我想根据状态值更改单元格。

我不知道该怎么做，因为我是React新手。我在想状态行/单元格下面的组件，也许可以添加一个if值会改变的组件。不知道是否可能。

我的组件看起来像这样：

 class FlightComponent extends React.Component {
        render() {
            const { data, activeTab } = this.props;
            let columns = [
                //{ Header: 'Date', accessor: 'date' },
                { Header: 'Time', accessor: 'time' },
                { Header: 'Expected', accessor: 'expected', Cell: (row) => (<div className="expected">{row.value}</div>) },
                { Header: 'Airline', accessor: 'airline', Cell: (row) => (<div className="airline-name">{row.value}</div>) },
                { Header: 'Flight No.', accessor: 'flight_no'},
            ];
            if (activeTab == 1) {
                columns.push({ Header: 'Destination', accessor: 'destination' })
            } else {
                columns.push({ Header: 'Arriving From', accessor: 'arriving_from' })
            }
            columns = columns.concat([
                { Header: 'Gate', accessor: 'gate' },
                { Header: 'Terminal', accessor: 'terminal' },
                { Header: 'Status', accessor: 'status' }
            ]);

            return (
                <div>
                    <ReactTable
                        columns={ columns }
                        data = {this.props.data}
                    />
                </div>
            )
        }
    }

Answer 1

对于react-table，您可以使用Custom Cell, Header and Footer Rendering

您可以使用任何react组件或JSX在列标题，单元格和页脚中显示内容。您使用的任何组件都会传递以下道具（如果有）：

行-数据中的原始行原始-原始行中的后访问值
索引-行的索引
viewIndex -相对于当前页面的行的索引
级别-嵌套深度（零索引）
nestingPath -行的嵌套路径
汇总-布尔值，说明该行是否为汇总行
subRows -此行中包含的所有可扩展子行的数组

您可以查看，这里是 stackblitz 演示。

代码段

render() {
    const data = [{
        task: 'Demo 1',
        status: 'pending'
    }, {
        task: 'Demo 2',
        status: 'completed'
    }]

    const columns = [{
        Header: 'Task Name',
        accessor: 'task'
    }, {
        Header: 'Status',
        accessor: 'status',
        Cell: (row, original, index, viewIndex, level, nestingPath, aggregated, subRows) => {
            row.styles['color'] = '#fff';
            row.styles['backgroundColor'] = row.value == 'pending' ? 'red' : 'green';
            return row.value.toUpperCase();
        }
    }];

    return (
       <ReactTable
        data={data}
        columns={columns}
        defaultPageSize={5}
        className="-striped -highlight"
      />
    );

}

当内部文本更改为另一个值时，如何在单元格内添加样式元素

1 个答案: