3

我的应用程序中有一个react-table组件并传递下一个道具：

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

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

4

2 回答 2

4

我不确定您实际上要做什么，但这是我的想法。

getTrProps用于将道具传递给表格的行。所以根据模块文档，你可以传递你想要的任何东西。

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

// Any Tr element will be green if its (row.age > 20)
<ReactTable
  getTrProps={(state, rowInfo, column) => {
    return {
      style: {
        background: rowInfo.age > 20 ? 'green' : 'red'
      }
    }
  }}
/>
于 2017-02-03T15:25:26.093 回答
2

对 react-table 5.0.2 的修复允许访问表的实例，并且可以通过在表的实例上调用 .forceUpdate() 方法来解决问题。在这种情况下，changeing_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的响应能力和快速修复。

于 2017-02-03T21:30:01.113 回答