状态更改后在视频标签中添加控件属性答案

【问题标题】：Add controls attribute in video tag after state changes状态更改后在视频标签中添加控件属性
【发布时间】：2021-10-20 11:18:10
【问题描述】：

我在 reactJS 中有一个视频标签。

      <video {props.flag == true && "controls"}>
        <source src= "/videos/video_tab.mp4" type="video/mp4"/>
        Your browser does not support the video tag.
      </video>

React 给我{props.flag == true && "controls"} 的错误是语法不正确

据我们所知，我们可以在基本的 html 中获得控件，例如

      <video controls>
        <source src= "/videos/video_tab.mp4" type="video/mp4"/>
        Your browser does not support the video tag.
      </video>

但我只想在 props.flag == true 默认为 false 时显示控件。
我该怎么做？

【问题讨论】：

标签： reactjs html5-video

【解决方案1】：

我建议你先阅读React introduction。

props被定义为属性，使用花括号{}时值为表达式：

      <video controls={props.flag}>
        <source src= "/videos/video_tab.mp4" type="video/mp4"/>
        Your browser does not support the video tag.
      </video>

【讨论】：

实际上我试图从浏览器检查器中设置controls=false。但这不起作用。
从开发工具的元素检查器中，您只能更改与道具不同的属性。 HTMLVideoElement#controls 的属性不需要值。当controls 属性存在时，这些控件处于活动状态。如果要删除控件，只需删除 controls 属性。当使用布尔值作为值时，React 会自动执行此操作，例如controls={props.flag}.
controls 的存在意味着一个真实的价值。要隐藏控件，必须删除控件属性。 controls=false 对 controls=true 或 controls=rhinoceros 有相同的响应

【解决方案2】：

我会试试<video controls={props.flag}> 因为<video something> 是<video something=true> 的短版

【讨论】：