根据状态值更改 Ant Design 表的标题

【问题标题】：Change title of the Ant Design table depending on state value根据状态值更改 Ant Design 表的标题
【发布时间】：2020-10-27 10:25:51
【问题描述】：

我需要一点帮助，在 Ant Design 表中，我需要表的标题应该根据状态值而改变。在给定的沙盒示例中，列标题surname 应更改为Second Name，其中开关打开，否则应仅显示surname。

参考：https://codesandbox.io/s/purple-sun-1rtz1?file=/index.js

谢谢。

【问题讨论】：

标签： reactjs state antd

【解决方案1】：

您可以根据surNameShow更改标题

render() {
    const { dataSource, surNameShow } = this.state;
    const columns = this.columns;
    // check and set title here
    // If you want to change the second column you can use index 1, if you want it to be dynamic just loop through columns array update column you desire
    if (surNameShow) {
      columns[1].title = "Second Name";
    } else {
      columns[1].title = "Surname";
    }
    return (
      <div>
        <p className="mr-3"> Change Surname to Second Name</p>
        <Switch onChange={() => this.handleChnage()} />
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={false}
        />
      </div>
    );
  }

Codesandbox demo

【讨论】：