<div>上的'onClick'功能在受控状态下不起作用

Question

我正在尝试为ReactJS项目中某个元素的click事件设置回调函数。

import React, { Component, Fragment } from 'react';

class App extends Component {
  state = {
    active: false
  }

  render() {
    return (
      <Fragment>
      <button type="button" onClick={() => this.setState({ active: !this.state.active })}>Activate!</button>
      {this.state.active && 
        <div onClick={() => console.log(1)}>Log 1</div>
      }
      </Fragment>
    )
  }
}

当“活动”状态为true时，将呈现<div>对象。 如果没有{this.state.active && ...}，它将无法正常工作。

有人可以解释这种行为吗？