我编写了在 ant design Table 组件中单击行的行为。这应该更改表上的 rowClassName。这是一个关于 CodeSendBox 的例子。当您单击表格行时，Store.selectedRowKey 中的值会发生变化，但表格不会重新呈现。如果将分隔滑块移动到沙箱并且表格大小发生变化，则会发生渲染并应用新的行选择
这是另一个例子，其中 mobx 不适用于 ant-design Table
我是 Mobx 的新手我真的很想了解我做错了什么
当在 mobx 商店中更改状态时，Ant-Design Table 不呈现
IT技术
reactjs
antd
mobx
2021-05-05 14:01:22
2个回答
要重新渲染 Ant-Design 表，您必须将数据源值作为可观察值的副本传递。
你必须改变
<Table
columns={columns}
dataSource={values}
/>
到以下代码：
<Table
columns={columns}
dataSource={[...values]}
/>
基本上你不会selectedRowKey在你的观察者组件内部使用，所以这就是它在改变时不会重新渲染的原因。
您将回调函数传递给 aTable但Table不是观察者。
我不确定是否有可能让它成为观察者antd，但你还能做什么：
1）只需selectedRowKey在渲染中的某处使用。就像console.log这样，然后您的整个组件将在单击行时重新渲染（包括表格）。
或者更好的方法，将它与data行混合，例如isSelected为内部渲染的每个数据添加键并更改rowClassName为使用此标志：
dataSource={data.map(item => ({...item, isSelected: this.props.Store.selectedRowKey === item.key}))}
rowClassName={x => x.isSelected ? 'test-table-row-selected' : ''}
2）antd rowSelection像那样使用propsrowSelection={{selectedRowKeys: [selectedRowKey]}}。但它也会为每一行添加复选框。