Question

我的应用中有一个 react-table 组件，并在那里传递道具：

<ReactTable
  data={this.props.words}
  columns={columns}
  getTrProps={changing_state_func}
/>

changing_state_func是一个更改包装react-table的组件状态的函数。具体来说，此函数填充包含行的数据对象的ID的数组。所以我想用这些ID的数据突出显示行...无法弄清楚如何使用这个特定的数据网格做到这一点。也许有人有使用react-table和示例的经验。

Answer 1

我不确定你究竟想做什么，但这是我的想法。

getTrProps用于将props传递给表的行。所以根据the module docs，你可以传递你想要的任何东西。

该示例显示了如何更改符合特定条件的行的颜色：

// Any Tr element will be green if its (row.age > 20)
<ReactTable
  getTrProps={(state, rowInfo, column) => {
    return {
      style: {
        background: rowInfo.age > 20 ? 'green' : 'red'
      }
    }
  }}
/>

Answer 2

对react-table 5.0.2的修复允许访问表的实例，并且可以通过在表的实例上调用.forceUpdate（）方法来解决问题。在这种情况下，changing_state_func可能如下所示：

changing_state_func = (state, rowInfo, column, instance) => {
  if (!rowInfo) return {}
  return {
    style: {
      background: (this.state.rowsIdsArray.includes(rowInfo.row.id)) ? 'green' : null
    },
    onClick: () => {
      this.setState({rowsIdsArray: this.state.rowsIdsArray.concat([rowInfo.row.id])});
      instance.forceUpdate()
    }
  }
}

感谢Tanner Linsley的响应速度和快速修复。

如何在react-table中重新呈现整行？

2 个答案: