尝试比较反应中两个单元格的值，然后根据值更改样式

Question

我是新手。

我使用 react-table 模块制作了一个 table 我试图突出显示第一列中的单元格与第二列中它旁边的单元格不相等的所有单元格.

这是我的 table 组件：

const Table = () => {

    const columns = useMemo(() => Columns, [])
    const data = useMemo(() => mock, [])
    
    

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        state,
        setGlobalFilter,
    } = useTable({
        columns,
        data,
    }, useGlobalFilter)

    const { globalFilter } = state

    return (
        < >
         
            <SearchBar searchValue={globalFilter} setSearchValue={setGlobalFilter}/>
            
           
        <div>
            
            <table {...getTableProps()}>
                <thead>

                    
                    {headerGroups.map((headerGroup) =>(
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {headerGroup.headers.map((column) => (
                                <th {...column.getHeaderProps()}>
                                    {column.render('Header')}
                                </th>
                            ))}
                        </tr>
                    ))}
                        
                </thead>
                <tbody {...getTableBodyProps()}>
                    {
                        rows.map((row) =>{
                            prepareRow(row)
                            return (
                                <tr {...row.getRowProps()}>
                                    {row.cells.map((cell, index)=> {
                                        return <td {...cell.getCellProps()} style = {{
                                            backgroundColor:{rows[0].cells[index].value!==rows[1].cells[index].value ? 'red': null}
                                        }}>{cell.render('Cell')}</td>
                                    })} 
                                </tr>
                            )
                        })
                    }
                    
                </tbody>
            </table>
        </div>
        </>
    )


        

    
}


export default Table

当我运行这时我得到两个错误

expected ',' at

backgroundColor:{rows[0].cells[index].value!==rows[1].cells[index].value ? 'red': null}

expected ':' at

backgroundColor:{rows[0].cells[index].value!==rows[1].cells[index].value ? 'red': null}

任何帮助将不胜感激

Answer 1

{backgroundColor:(rows[0].cells[index].value!==rows[1].cells[index].value ? 'red': null)}

使用圆括号而不是大括号。

尝试比较反应中两个单元格的值，然后根据值更改样式

Trying to compare the value of two cells in react, then change style based on value

jsx

reactjs

react-table

react-table-v7