React.Js中如何向控件正确传递Boolean类型值

原代码存在的问题 #

• state语法错误：state是标准JavaScript对象，对象内部仅支持键: 值的定义格式，原代码写的video.controls= false属于非法的赋值表达式，会直接报语法错误
• 属性绑定逻辑错误：原生HTML的布尔属性规则是「标签上只要存在该属性，无论值是什么都视为开启」，原代码硬编码写死controls属性，等价于永久开启控制栏，完全无法通过状态控制开关

核心实现规则 #

React对所有原生DOM布尔属性（包括controls、disabled、checked、readOnly等）做了适配：

当给属性绑定true值时，React会正常在DOM节点上渲染该属性；当绑定false值时，React会直接从DOM上移除该属性，完全匹配原生布尔属性的生效逻辑。
注意：不要给这类布尔属性传字符串类型的"true"/"false"，非空字符串会被判定为真值，导致属性一直处于开启状态

正确代码示例（类组件） #

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    // 合法定义控制视频控件显隐的布尔状态
    this.state = {
      showVideoControls: false
    };
    this.toggleControls = this.toggleControls.bind(this);
  }

  // 测试用：切换控件显隐状态
  toggleControls() {
    this.setState(prevState => ({
      showVideoControls: !prevState.showVideoControls
    }));
  }

  render() {
    return (
      <div className="container">
        {/* 通过JSX花括号将布尔状态绑定到controls属性，禁止硬写裸的controls属性 */}
        <video controls={this.state.showVideoControls} width="640">
          <source src="your-local-video-path.mp4" type="video/mp4" />
          <p>当前浏览器不支持HTML5视频播放</p>
        </video>
        <button onClick={this.toggleControls} style={{marginTop: 12}}>
          {this.state.showVideoControls ? "隐藏视频控件" : "显示视频控件"}
        </button>
      </div>
    );
  }
}

export default App;

补充 #

如果使用函数组件+Hooks开发，逻辑完全一致，只需要把类组件的state替换为useState定义的布尔变量，绑定到controls属性上即可。

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