在Table组件中使用默认属性defaultExpandAllRows来展开所有行,但是在使用fetch获取异步数据时,由于数据尚未到达,此属性不会起作用。
在fetch获取数据后,通过设置state更新数据,然后在Table组件中使用expandedRowKeys属性展开想要展开的行。
以下是一个代码示例:
class MyTable extends React.Component {
state = {
dataSource: [],
expandedRowKeys: [],
};
componentDidMount() {
fetch('http://example.com/data.json')
.then(response => response.json())
.then(dataSource => this.setState({ dataSource }));
}
onExpand = (expanded, record) => {
if (expanded) {
this.setState({
expandedRowKeys: [...this.state.expandedRowKeys, record.key],
});
} else {
this.setState({
expandedRowKeys: this.state.expandedRowKeys.filter(key => key !== record.key),
});
}
};
render() {
return (
);
}
}