React 使用 HTML5 视频标签 controlsList 属性答案

【问题标题】：React use of HTML5 video tag controlsList attributeReact 使用 HTML5 视频标签 controlsList 属性
【发布时间】：2017-11-20 15:24:33
【问题描述】：

试图用 React 组件返回这个元素：<video ... controls controlsList="nodownload" /> 并且下载按钮仍然出现。

没有办法用 React 传递这个参数（controlsList）吗？

也试过htmlControlsList=

错误日志：标签上的未知道具controlsList。从元素中移除这个道具。有关详细信息，请参阅 ....URL

【问题讨论】：

你能分享一个sn-p吗？
return (<video src={item.video_url} poster={item.photo_url} key={item.attachment_id} className="project-item" controls controlsList="nodownload"></video>); 我试过这个。显然反应忽略了这个属性，并且没有关于它的文档。
也许还有其他方法可以访问由 React 呈现的元素属性？
与此同时，您可以创建对视频 ref={(v)=>{this.video=v}} 的引用，然后在 componentDidMount 中使用普通 JS this.video.setAttribute("controlsList","nodownload"); 添加它

标签： reactjs html5-video

【解决方案1】：

直到问题在 React 中得到解决，这是添加属性的方法

componentDidMount() {
  this.video.setAttribute("controlsList","nodownload");
}

render() {
  return (
    <video 
      ref={(v)=>{this.video=v}}
      src="myvideo.mp4" 
      controls 
      autoplay />
  )
}

【讨论】：

【解决方案2】：

对 ControlsList API has been reported a couple of weeks ago 和相关 PR 的支持刚刚在 5 天前合并。

它应该可以在即将发布的 React 版本之一中使用。

【讨论】：