问题
I program the behavior of clicking on a row in the ant design Table component. This should change the rowClassName on the Table. Here is an example on CodeSendBox. When you click on a table row, the value in the Store.selectedRowKey changes, but the table is not re rendering. If you move the dividing slider to the sandbox and the table size changes, then rendering occurs and a new row selection is applied
回答1:
Basically you don't use selectedRowKey inside your observer component, so that's why it does not rerender when it changes.
You pass a callback function to a Table but Table is not observer.
I am not sure if it possible to make it observer in antd, but what else you can do:
1) Just use selectedRowKey inside your render somewhere. Like just console.log it and then your whole component will rerender (including the Table) when row is clicked.
Or better way, mix it with data rows, for example add isSelected key for each data for inside render and change rowClassName to use this flag:
dataSource={data.map(item => ({...item, isSelected: this.props.Store.selectedRowKey === item.key}))}
rowClassName={x => x.isSelected ? 'test-table-row-selected' : ''}
2) Use antd rowSelection prop like that rowSelection={{selectedRowKeys: [selectedRowKey]}}. But it will also add checkboxes to each row.
来源：https://stackoverflow.com/questions/62261679/ant-design-table-not-rendering-when-change-state-in-mobx-store