如何使用React向HTML5 video的controls属性传递布尔值

现有代码存在两处核心错误：

• state初始化语法不符合JS规范：对象字面量内部不支持video.controls = true这类点语法赋值写法，必须使用标准键值对结构存储状态。
• 标签属性未关联组件状态：<video>上的controls是硬编码的静态属性，无法随state值变化动态生效/失效。

class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state，扁平存储控制条显示状态的布尔值
    this.state = {
      videoControlsVisible: true
    }
  }

  render() {
    return (
      <div className="container">
        {/* 通过JSX表达式将state的布尔值绑定到controls属性 */}
        <video controls={this.state.videoControlsVisible}>
          <source 
            src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" 
            type="video/mp4" 
          />
          <p>Your browser doesn't support HTML5 video.</p>
        </video>
      </div>
    );
  }
}

export default App;

• React对原生HTML布尔属性（包括controls、disabled、checked、required等）的处理规则为：当绑定值为true时，属性正常渲染到DOM上生效；当绑定值为false时，属性不会被渲染到DOM，对应功能失效。
• 如果需要动态切换控制条显隐，只需要调用this.setState({ videoControlsVisible: !this.state.videoControlsVisible })更新状态即可，视图会自动同步更新，不需要手动操作DOM。
• state推荐使用扁平结构存储单一状态值，不要嵌套模拟DOM结构，更便于状态更新和维护。

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