javascript - 如何将类仅添加到React中专门单击的元素？

我在对象上循环并显示li标签，并附加了点击处理程序。

在其下面是显示更多信息的游戏组件。

有人可以帮助我了解我的逻辑以及如何告诉React仅将类添加到与点击相关的特定组件中。
 在

当前，当我单击一个元素时，以下所有游戏组件会同时打开。我只想要下面的一个打开。

库组件

 class Library extends React.Component {

  state = {
    active: false
  };

  toggleClass = index => {
    let active = this.state.active;
    active = !active;
    this.setState({ active });
  };

  render() {
    return (
      <section>
        <h2>Game Library</h2>
        <ul>
          {this.props.games.map((game, index) => (
            <Fragment key={`${index}-${game.name}`}>
              <li
                key={`${index}-${game.gameId}`}
                onClick={() => this.toggleClass(index)}
              >
                {game.name}
              </li>
              <Game
                key={index}
                index={index}
                game={this.props.games[index]}
                active={this.state.active}
              />
            </Fragment>
          ))}
        </ul>
      </section>
    );
  }
}

游戏组件

  class Game extends React.Component {
      render() {
        return (
          <div
            key={this.props.index}
            className={this.props.active ? "show" : "hide"}
          >
            <p>{this.props.game.name}</p>
            <p>{this.props.game.gameId}</p>
            <a>Close</a>
          </div>
        );
      }
    }

最佳答案

可以为每个active使用一个带有键的对象，而不是为每个game使用布尔index，该对象表示该特定游戏是否处于活动状态。

例

class Library extends React.Component {
  state = {
    active: {}
  };

  toggleClass = index => {
    this.setState(previousState => {
      const active = { ...previousState.active };
      active[index] = !active[index];
      return { active };
    });
  };

  render() {
    return (
      <section>
        <h2>Game Library</h2>
        <ul>
          {this.props.games.map((game, index) => (
            <Fragment key={`${index}-${game.name}`}>
              <li
                key={`${index}-${game.gameId}`}
                onClick={() => this.toggleClass(index)}
              >
                {game.name}
              </li>
              <Game
                key={index}
                index={index}
                game={game}
                active={this.state.active[index]}
              />
            </Fragment>
          ))}
        </ul>
      </section>
    );
  }
}