Javascript ReactJS：如何使用react正确播放带有onClick事件的html5视频？

在我的react组件中，我有一个视频标签，如下所示：

  <video>
    <source src="https://fake.com/file.mp4" type="video/mp4" />
  </video>

但是这是我第一次使用react，我想知道是否有一种更“react”的方式来做这件事？此外，如果我必须像上面那样使用纯javascript，那么将代码放在react组件本身中是否合适？作为参考，我的组件如下所示（减去一些细节）：

import React，{Component}来自'React'；
从“./footerComponent”导入页脚
从“./navbarComponent”导入导航栏；
类Home扩展了React.Component{
render（）{
返回(
言语
观看我们的视频

)
}
};
导出默认主页；

您可以使用this.refs.video.play（）

class Home extends React.Component{
  render() {

    return (
      <div className="wrapper home-page">
        <div className="jumbotron-video-wrapper">
          <video ref="video">
            <source src="https://fake.com/file.mp4" type="video/mp4" />
          </video>
        </div>
        <Navbar type={"transparent"}/>
        <div className="jumbotron margin-bottom-20" style={heroStyle}>
          <div className="container-fluid">
            <div className="row">
              <div className="col-md-8 col-md-offset-2 text-center">
                <h1>WORDS WORDS WORDS</h1>
                <img onClick={() => {this.refs.video.play()}} width="130" src={playImage}/>
                <p className="thin">Watch our video</p>
              </div>
            </div>
          </div>
        </div>
        <Footer/>
      </div>
    )
  }
};

class Home扩展了React.Component{
render（）{
返回(
言语
观看我们的视频

)
}
};

您还可以对视频元素执行onClick={e=>e.target.play（）}。

---

希望这有帮助

这很有效，但与我的其他方法没有什么不同。但我想这就是react应该使用的方式？是的，至少对于触发事件这样的小事情。否则，您应该创建一个组件。

var v = document.getElementsByTagName("video")[0];
v.play();

import React, { Component } from 'react';
import Footer from './footerComponent'
import Navbar from './navbarComponent';


class Home extends React.Component{
  render() {

    return (
      <div className="wrapper home-page">
        <div className="jumbotron-video-wrapper">
          <video>
            <source src="https://fake.com/file.mp4" type="video/mp4" />
          </video>
        </div>
        <Navbar type={"transparent"}/>
        <div className="jumbotron margin-bottom-20" style={heroStyle}>
          <div className="container-fluid">
            <div className="row">
              <div className="col-md-8 col-md-offset-2 text-center">
                <h1>WORDS WORDS WORDS</h1>
                <img onClick={playvideo??} width="130" src={playImage}/>
                <p className="thin">Watch our video</p>
              </div>
            </div>
          </div>
        </div>
        <Footer/>
      </div>
    )
  }
};

export default Home;

class Home extends React.Component{
  render() {

    return (
      <div className="wrapper home-page">
        <div className="jumbotron-video-wrapper">
          <video ref="video">
            <source src="https://fake.com/file.mp4" type="video/mp4" />
          </video>
        </div>
        <Navbar type={"transparent"}/>
        <div className="jumbotron margin-bottom-20" style={heroStyle}>
          <div className="container-fluid">
            <div className="row">
              <div className="col-md-8 col-md-offset-2 text-center">
                <h1>WORDS WORDS WORDS</h1>
                <img onClick={() => {this.refs.video.play()}} width="130" src={playImage}/>
                <p className="thin">Watch our video</p>
              </div>
            </div>
          </div>
        </div>
        <Footer/>
      </div>
    )
  }
};