React中结合Map实现基于组件状态的条件渲染类控制

你的思路没问题，核心就是用组件状态来单独控制每个渲染出来的div的类名，咱们一步步拆解实现：

1. 设计合适的状态结构 #

首先你需要一个状态来跟踪每个div的类名状态——比如如果是要实现“点击切换高亮”这类需求，建议用对象类型的状态，键可以是每个item的唯一标识（比如name，如果你的name不会重复的话；如果有重复最好给每个item加个id字段），值用来标记当前的类名状态（比如active或者空字符串）。

在constructor里初始化状态：

constructor(props) {
  super(props);
  // 假设你的数组是props.items，初始化状态为所有item都默认无额外类名
  this.state = {
    itemClasses: props.items.reduce((acc, item) => {
      acc[item.name] = ''; // 初始状态可以是空，或者你需要的默认类名
      return acc;
    }, {})
  };
  // 别忘了绑定事件处理函数
  this.handleItemClick = this.handleItemClick.bind(this);
}

2. 渲染时结合状态控制类名 #

在render方法里用map遍历数组，每个div的className要同时包含固定的genre类，和状态里对应的动态类名：

render() {
  const { items } = this.props;
  const { itemClasses } = this.state;

  return (
    <div className="container">
      {items.map(item => (
        <div
          key={item.name} // 用唯一值当key，避免渲染警告
          className={`${item.genre} ${itemClasses[item.name]}`}
          onClick={() => this.handleItemClick(item.name)}
        >
          {item.name}
        </div>
      ))}
    </div>
  );
}

3. 实现状态更新的事件处理函数 #

写一个方法来修改状态，比如点击div时切换它的类名（比如切换active类）：

handleItemClick(itemName) {
  this.setState(prevState => ({
    itemClasses: {
      ...prevState.itemClasses,
      // 切换当前item的类名：如果是active就清空，否则设为active
      [itemName]: prevState.itemClasses[itemName] === 'active' ? '' : 'active'
    }
  }));
}

完整示例代码 #

把上面的部分整合起来，就是一个完整的组件：

class GenreItems extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      itemClasses: props.items.reduce((acc, item) => {
        acc[item.name] = '';
        return acc;
      }, {})
    };
    this.handleItemClick = this.handleItemClick.bind(this);
  }

  handleItemClick(itemName) {
    this.setState(prevState => ({
      itemClasses: {
        ...prevState.itemClasses,
        [itemName]: prevState.itemClasses[itemName] === 'active' ? '' : 'active'
      }
    }));
  }

  render() {
    const { items } = this.props;
    const { itemClasses } = this.state;

    return (
      <div className="container">
        {items.map(item => (
          <div
            key={item.name}
            className={`${item.genre} ${itemClasses[item.name]}`}
            onClick={() => this.handleItemClick(item.name)}
          >
            {item.name}
          </div>
        ))}
      </div>
    );
  }
}

// 使用组件的示例：
const sampleItems = [
  { name: 'Rock Song', genre: 'rock' },
  { name: 'Jazz Tune', genre: 'jazz' },
  { name: 'Pop Track', genre: 'pop' }
];

ReactDOM.render(<GenreItems items={sampleItems} />, document.getElementById('root'));

额外提示 #

• 如果你的genre类需要和动态类名有优先级，记得在CSS里设置好权重（比如.active的样式要写在.rock/.jazz之后）
• 如果item的name可能重复，一定要给每个item添加唯一的id字段，用id作为状态对象的键和组件的key，避免状态混乱

内容的提问来源于stack exchange，提问作者Ryan