Как изменить стиль MenuItem (antd) при динамическом изменении?

Question

У меня есть меню с некоторым Menu.Item, каждый из которых дает доступ к различному контенту. Из одного контента я хотел бы динамически переходить к другому контенту, но, поскольку они представлены Предметом (чтобы пользователь мог видеть, где он находится), мне нужно оформить Предмет, и, поскольку я не нажимаю на него,Элемент стиля после этого

Вот демо: Онлайн демо

// antd imports

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentPage: "0" };
  }

  handleMenuClick(e) {
    this.setState({ currentPage: e.key });
  }

  render() {
    return (
      <div className="App">
        <Menu onClick={e => this.handleMenuClick(e)}
          selectedKeys={[this.state.currentPage]}
          mode="horizontal">
          <Menu.Item tab="P1" key="0">  P1 </Menu.Item>
          <Menu.Item tab="P2" key="1"> P2 </Menu.Item>
        </Menu>

        <Row> {this.getPage()} </Row>
        <Button type="primary" onClick={() => this.action()}> Primary </Button>
      </div>
    );
  }

  getPage() {
    const pageKey = parseInt(this.state.currentPage, 10);
    if (pageKey === 0) {
      return <span>Page 1</span>;
    } else if (pageKey === 1) {
      return <span>Page 2</span>;
    }
    return <span>NOTHING TO DISPLAY</span>;
  }

  action() {
    this.setState({ currentPage: 1 });
  }
}

На данный момент меню правильно оформлено, если я нажимаю от одного элемента к другому, но когда я использую метод action(), он показывает хорошее содержание, но элемент не имеет стиля

Answer 1

selectedKeys принимает массив строк: string[], а на action вы предоставляете Number, который делает selectedKeys тип number[].

Чтобы исправить это, верните строку в action код:

action = () => {
//                              v Needs to be a type of `String`
  this.setState({ currentPage: '1' });
};