Javascript 如何玩<；视频></视频>；在没有外部库的情况下如何反应？

我的网页上有一个视频标签和一个“播放/暂停”按钮，当用户点击它时，视频应该开始/停止播放。不幸的是，此解决方案不起作用（）。是否有可能与react slick carousel（）发生冲突

这是我的密码：

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

class VideoCarousel extends Component {

    playVideo() {
        this.refs.vidRef.play();
    }

    componentRender(data) {
        const settings = {
            dots: true,
            ...
        };

        return (
          <div id="video-carousel">
            <div>
               <Slider {...settings}>
                  {data.map((item, index) => (
                      <div key={index}>
                         <div className="video">
                            <div className="w-100 h-100">
                               <video className="video-carousel-card-video" ref="vidRef">
                                  <source src={item.video_file} type="video/mp4" />
                               </video>
                               <button className="card-video-button" onClick={this.playVideo.bind(this)}>
                               </button>
                            </div>
                          </div>
                        </div>
                   ))}
               </Slider>
             </div>
          </div >
        )
    }
}

export default VideoCarousel;

从“React”导入React；
从“react slick”导入滑块；
导入“slick carousel/slick/slick.css”；
导入“slick carousel/slick/slick theme.css”；
类VideoCarousel扩展组件{
播放视频（）{
this.refs.vidRef.play（）；
}
组件渲染（数据）{
常量设置={
点：是的，
...
};
返回(
{data.map（（项目，索引）=>(
))}
)
}
}
导出默认视频传送带；

我注意到了几件事：

您应该使用

this为类定义refs。不推荐使用refs

：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

其次，您缺少一个

render

函数，它是所有类组件所必需的

最后，数据从哪里来？我看不到它在任何地方被定义，你也不能通过状态或道具访问它

---

.

问题在ref=“vidRef”上。由于它嵌套在forEach（）函数中，它会创建多个对不同元素的引用，因此play（）函数没有特定的引用。

1。折旧已修复，2。我使用了一个定制的“ComponentRender”函数，而不是render，该函数是3。确实获取了数据。数据来自API，它们通常呈现。在上面的代码中，我删除了所有不必要的代码。解决方案不起作用。没有自定义渲染。默认情况下，React类调用

render

函数。您可以在其中调用另一个函数，但名为render的函数必须存在。我没有足够的信息让你的代码正常工作，但我在回答中添加了一个工作示例，演示了如何做到这一点。

playVideo() {
        this.myRef.current.play();
    }