React中如何获取所有指定className的DOM元素？

嘿，我来帮你搞定这个问题！在React里直接操作DOM虽然不是最推荐的做法，但如果你的游戏确实需要这么做，有两种靠谱的方式可以实现，我给你详细讲讲：

方法一：使用React Refs + 生命周期方法（类组件适用） #

因为你的组件是类组件，我们可以借助React.createRef()绑定到父容器上，然后在组件挂载完成后（确保DOM已经渲染）去查询子元素。这样做比直接用document.querySelectorAll更精准，不会误拿到其他组件里的.enemys元素。

修改后的代码示例：

class FourthLine extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个ref来绑定父容器
    this.lineContainerRef = React.createRef();
  }

  componentDidMount() {
    // 组件挂载完成后，真实DOM已经生成
    const allEnemyElements = this.lineContainerRef.current.querySelectorAll('.enemys');
    
    // 现在你可以读取这些元素的信息了
    allEnemyElements.forEach(enemyEl => {
      // 举个例子：获取元素位置、自定义属性等
      console.log('Enemy元素位置:', enemyEl.getBoundingClientRect());
      console.log('Enemy元素的自定义data属性:', enemyEl.dataset);
    });
  }

  // 如果你的.enemys元素会动态增减（比如游戏里怪物刷新），记得在componentDidUpdate里也执行查询
  componentDidUpdate(prevProps, prevState) {
    // 可以加个条件判断，避免不必要的重复查询
    if (/* 这里判断状态/属性是否变化，比如怪物数量变了 */) {
      const allEnemyElements = this.lineContainerRef.current.querySelectorAll('.enemys');
      // 处理更新后的元素...
    }
  }

  render() {
    const monsterList4 = [];
    for (let i = 0; i < 11; i++) {
      const monsterLine4 = <div className="four-line enemys"></div>;
      monsterList4.push(monsterLine4);
    }
    // 把ref绑定到父容器上
    return <div className="line-four" ref={this.lineContainerRef}> {monsterList4} </div>;
  }
}

方法二：用React状态管理数据（更推荐的React风格） #

其实如果你的需求是读取怪物的相关信息，更符合React理念的做法是把数据存在state里，而不是从DOM中读取。这样数据和视图是绑定的，避免直接操作DOM带来的状态不一致问题。

比如可以这样改写：

class FourthLine extends React.Component {
  constructor(props) {
    super(props);
    // 把每个怪物的信息存在state里，比如ID、血量、位置等
    this.state = {
      monsters: Array.from({ length: 11 }).map((_, idx) => ({
        id: idx,
        health: 100, // 示例属性：怪物血量
        position: { x: 0, y: 0 } // 示例属性：位置
      }))
    };
  }

  // 如果你需要获取怪物信息，直接从state拿就行
  getMonsterInfo() {
    this.state.monsters.forEach(monster => {
      console.log(`怪物${monster.id}的信息:`, monster);
    });
  }

  render() {
    return (
      <div className="line-four">
        {this.state.monsters.map(monster => (
          <div
            key={monster.id}
            className="four-line enemys"
            // 如果需要给DOM绑定数据，用data-*属性
            data-monster-id={monster.id}
            data-health={monster.health}
          ></div>
        ))}
      </div>
    );
  }
}

这种方式下，你不需要去DOM里找元素，直接操作state就能获取或更新怪物的信息，这才是React设计的初衷哦！

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