Tại sao khi click lần đầu tiên hành động chưa thực thi ngay

Theo code hiện tại của bạn thì sau khi bạn click lần đầu tiên thì nó mới tiến hành gán sự kiện này vào thẻ div

itemAccor.onclick = () => itemAccor.classList.toggle("active");

Nếu bạn muốn nó chạy ngay lần đâu tiên thì nên khai báo phần gán function này ở trong hàm componentDidMount() luôn như này:

class Accordion extends React.Component {
    
  componentDidMount() {
    const myAccor = this.getEle.children;
    console.log(myAccor);
    for (let i = 0; i < myAccor.length; i++) {
      console.log(myAccor[i]);
      let itemAccor = myAccor[i];
      itemAccor.onclick = () => itemAccor.classList.toggle("active");
    }
  }
  
  render() {
    return (
      <div
        ref={ele => this.getEle = ele} 
        onClick={this.handleClick}>
        {this.props.children}
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
  
        <Accordion>
        
          <div className="accor">
            <div className="head">Head 1</div>
            <div className="body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        
          <div className="accor">
            <div className="head">Head 2</div>
            <div className="body">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        
        </Accordion>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Bởi vì trong lần đầu tiên load, sau khi click vào thẻ div thì mới gán sự kiện onClick cho component Accor.