Javascript 无法读取null的属性addEventListener

我有一个

img

元素，点击后我希望它转换成

iframe

（嵌入式视频）。我已经为元素指定了一个

ref

，并且在组件装载时将事件侦听器附加到元素

我遇到的问题是，我没有看到我期望的变化。我在控制台中遇到一个错误

无法读取属性addEventListener为null

。单击图像时，什么也没有发生，我假设事件侦听器没有连接，或者处理程序方法工作不正常。我做错了什么

功能部件

export const ViewOneCourse = ({
  embedDiv,
  embedVideo
}) => {

  return (
    <div>
        <Grid item lg={5} md={5}>
          <div className="course-brick">
            <div
              className="youtube-video-place embed-responsive embed-responsive-4by3 "
              data-yt-url="https://www.youtube.com/embed/BjngNWP9C5s?rel=0&showinfo=0&autoplay=1"
              ref={embedDiv}
            >
              <img
                src={video.poster}
                async
                className="play-youtube-video"
                ref={embedVideo}
              ></img>
            </div>
          </div>
        </Grid>
       </div>
  )      
}

export const ViewOneCourse=({
(二)，
嵌入式视频
}) => {
返回(
)      
}

容器

export class ViewCourse extends Component {
  constructor(props) {
    super(props);
    this.embedVideo = React.createRef();
    this.embedDiv = React.createRef();
  }

  componentDidMount() {
    const embedVideo = this.embedVideo.current;
    if (embedVideo) {
      embedVideo.addEventListener("click", this.handleEmbedVideo);
    }
  }

  componentWillUnmount() {
    const embedVideo = this.embedVideo.current;
    if (embedVideo) {
      embedVideo.removeEventListener("click");
    }
  }

  handleEmbedVideo = () => {
    const video_wrapper = this.embedDiv.current;
    const embedUrl = video_wrapper.getAttribute("data-yt-url");
    //  Check to see if youtube wrapper exists
    if (video_wrapper.length) {
      video_wrapper.innerHTML =
        '<iframe allowfullscreen frameborder="0" class="embed-responsive-item" src="' +
        embedUrl +
        '"></iframe>';
    }
  };

  render() {
    return (
      <ViewOneCourse 
      embedDiv={this.embedDiv} 
      embedVideo={this.embedVideo} 
      />
    );
  }
}

导出类ViewCourse扩展组件{
建造师（道具）{
超级（道具）；
this.embeddevideo=React.createRef（）；
this.embeddediv=React.createRef（）；
}
componentDidMount（）{
const embeddevideo=this.embeddevideo.current；
if（嵌入式视频）{
EmbeddeVideo.addEventListener（“单击”，this.handleEmbedVideo）；
}
}
组件将卸载（）{
const embeddevideo=this.embeddevideo.current；
if（嵌入式视频）{
EmbeddeVideo.removeEventListener（“单击”）；
}
}
handleEmbedVideo=（）=>{
const video_wrapper=this.embeddediv.current；
const embedUrl=video_wrapper.getAttribute（“数据yt url”）；
//检查youtube包装器是否存在
if（视频包装器长度）{
视频包装器.innerHTML=
'';
}
};
render（）{
返回(
);
}
}

看起来问题在于如何检查视频包装器是否存在：

if (video_wrapper.length) {
...
}

您应该检查

video\u wrapper

是否真实，而不是检查属性

length

：

if (video_wrapper) {
...
}

此外，还有一种比使用参考文献更好的方法。 您可以将状态变量添加到

ViewCourse

，类似于

showIframe

，并将其传递到

ViewOneCourse

，然后在

ViewOneCourse

中使用该变量（

showIframe

）渲染图像或iframe

---

看起来问题在于如何检查视频包装器是否存在：

if (video_wrapper.length) {
...
}

您应该检查

video\u wrapper

是否真实，而不是检查属性

length

：

if (video_wrapper) {
...
}

此外，还有一种比使用参考文献更好的方法。 您可以将状态变量添加到

ViewCourse

，类似于

showIframe

，并将其传递到

ViewOneCourse

，然后在

ViewOneCourse

中使用该变量（

showIframe

）渲染图像或iframe

---

在您的容器中，视频包装器是一个HTMLVelment，您对其长度的检查返回未定义。因此，对video_wrapper.length的检查失败，因此if块永远不会执行。 您可以尝试以下代码段

if (video_wrapper) {
        video_wrapper.innerHTML =
            '<iframe allowfullscreen frameborder="0" class="embed-responsive- 
           item" src="' +
            embedUrl +
            '"></iframe>';
    }

if（视频包装器）{
视频包装器.innerHTML=
'';
}

---

希望这能有所帮助。

在您的容器视频中，包装器是一个HTMLLevel，您可以检查它的长度，它返回未定义的值。因此，对video_wrapper.length的检查失败，因此if块永远不会执行。 您可以尝试以下代码段

if (video_wrapper) {
        video_wrapper.innerHTML =
            '<iframe allowfullscreen frameborder="0" class="embed-responsive- 
           item" src="' +
            embedUrl +
            '"></iframe>';
    }

if（视频包装器）{
视频包装器.innerHTML=
'';
}

---

希望这有帮助。

您确定这就是您遇到的错误吗？因为在调用

addEventListener

：

…if（EmbeddeVideo）之前，您的代码确保
EmbeddeVideo
不为null{…

我在这里发布后对代码做了一点修改，但是上面的代码没有引起错误。您的回答更正了代码。您确定这就是您得到的错误吗？因为您的代码在调用

addEventListener

：

…if（EmbeddeVideo）之前确保
embedVideo
不为空{…

我在这里发布后对代码做了一点修改，但是上面的代码没有引起任何错误。您的回答更正了代码。在您的演示中，我注意到您在构造函数中绑定了handleEmbedVideo方法。您介意解释一下原因吗？我认为箭头方法不需要绑定您是对的，箭头函数不需要绑定我没有使用箭头函数的原因是，在我的演示中，我没有将babel配置为使用类属性。（）在您的演示中，我注意到您在构造函数中绑定了handleEmbedVideo方法。您介意解释一下原因吗？我认为arrow方法不需要绑定您是对的，arrow函数不需要绑定。我没有使用arrow函数的原因是，在我的演示中，我没有将babel配置为使用类属性。（）