您也可以在此處執行腳本https://codepen.io/tznqeyiq/pen/vYKNwKbclass App extends React.Component {  constructor(props) {    super(props);    this.state = {      playStyle: '',      playerOne: '',      playerTwo: '',      turn: 'one',    };    this.moveToNextPage = this.moveToNextPage.bind(this);    this.onClickEventsForFirstPage = this.onClickEventsForFirstPage.bind(this);    this.onClickEventsForSecondPage = this.onClickEventsForSecondPage.bind(this);  }  //// It all starts from here !!!!!!!!!!!!!!!!!!!1  componentDidMount() {    document.getElementById('start').style.display = 'flex';    document.querySelector('#mainXOROdiv').style.display = 'none';    document.querySelector('#playAreaMain').style.display = 'none';    this.onClickEventsForFirstPage();    this.onClickEventsForSecondPage();  }  /// componentDidMount is above !!!!!!!!!!!!!!!!!!!!  /* event handlers for first page */  onClickEventsForFirstPage() {    var single = document.getElementById('single');    single.addEventListener('click', () => {      this.moveToNextPage(document.querySelector('#mainXOROdiv'));      this.setState({        playStyle: 'single'      });    });    var double = document.getElementById('double');    double.addEventListener('click', () => {      this.moveToNextPage(document.querySelector('#mainXOROdiv'));      this.setState({        playStyle: 'double'      });    });  }  moveToNextPage(page) {    document.getElementById('start').style.display = 'none';    document.querySelector('#mainXOROdiv').style.display = 'none';    document.querySelector('#playAreaMain').style.display = 'none';    page.style.display = 'flex';  }  /* event handler for first page above  event handler for second page below */  onClickEventsForSecondPage() {    var X = document.querySelector('#xInSpan');    var O = document.querySelector('#oInSpan');    var clickedBtn = '';