当我在 reactjs 中有 9 个 div 时，我的 .length 方法 returns 0

Question

const boxes = {
  height: 220,
  width: 220,
  backgroundColor: 'red',
  borderRadius: '25%',
};
const main = {
  display: 'grid',
  gridTemplateColumns: 'auto auto auto',
  gridGap: '20px',
  justifyContent: 'center',
  marginTop: '20px',
};

const box = document.querySelectorAll('.boxes');
console.log(box.length);

class Easy extends React.Component {
  render() {
    return (
      <div className="easy-game">
        <div className="Easy-main" style={main}>
          <div style={boxes} className="boxes" />
          <div style={boxes} className="boxes" />
          <div style={boxes} className="boxes" />
        </div>
      </div>
    );
  }
}

export default Easy;

这是我的代码，我的 .length 方法在 return 中给出 0，而有 3 个 div 使用相同的 class 我开始反应所以我可能在某处出错

Answer 1

你的代码运行s 在渲染之前，所以不会有元素被渲染

在初始渲染后 componentDidMount 内移动它运行：

class Easy extends React.Component {
  componentDidMount() {
    const box = document.querySelectorAll('.boxes');  //<-- Move it here
    console.log(box.length);
  }

  render() {
    return (
      <div className="easy-game">
        <div className="Easy-main" style={main}>
          <div style={boxes} className="boxes" />
          <div style={boxes} className="boxes" />
          <div style={boxes} className="boxes" />
        </div>
      </div>
    );
  }
}

当我在 reactjs 中有 9 个 div 时，我的 .length 方法 returns 0

my .length method returns 0 when i has 9 divs in reactjs

reactjs

react-dom