React JS refuseRef：包含不是函数

问题描述

我正在做一个React JS项目。我正在使用挂钩和功能组件。我正在使用裁判。我正在使用useRef，因为我在功能组件中。但是contains函数在ref上不起作用。以下是我的代码。

const App = () => {
    let refDialog = useRef(null);
    
    document.addEventListener('click',(e) => {
      if (refDialog && refDialog.contains(e.target)) {
         // I will do something here
      }
    })
   
    return (
      <div>
        <Dialog ref={ ref => refDialog = ref}>My dialog content</Dialog>
     </div>
    )
}

正如您在我的组件中看到的那样，在事件侦听器中，它引发了以下错误。

Uncaught TypeError: refDialog.contains is not a function

我的代码有什么问题？

解决方法

首先删除错字-useRf-> useRef。其次-refDialog是一个只读变量，您不能覆盖它-ref={refDialog}就足够了（没有ref函数）。最后-refDialog将保存一个带有current字段的对象。因此最终条件将是：

if (refDialog.current && refDialog.current.contains(e.target))

,

Dialog可能不在内部处理引用。在这种情况下，您可以将其包装在div中（它不会具有完全相同的效果，但是可能仍然可以正常工作）：

const App = () => {
  const refDialog = useRef(null);
    
  useEffect(() => {
    document.addEventListener('click',handleClick);
    
    return () => document.removeEventListener('click',handleClick);
  },[]);

  const handleClick = e => {
    if (refDialog.current?.contains(e.target)) {
      // I will do something here
    }
  }
   
  return (
    <div ref={refDialog}>
       <Dialog}>My dialog content</Dialog>
   </div>
  );
}

还要注意，useEffect的使用是定义代码的方式，每次渲染时，都会创建一个新的事件侦听器，并且不会清除它。创建组件时，您可能只希望执行一次。

如果Dialog是您定义的组件，则需要确保使用forwardRef正确传递了引用。

const Dialog = React.forwardRef((props,ref) => (
  <div ref={ref} className="Dialog">{ props.children}</div
));

,

下面的代码应该起作用：

import React from "react";
const App2 = () => {
  let refDialog = React.useRef(null);

  document.addEventListener("click",(e) => {
    if (
      refDialog &&
      refDialog.current &&
      refDialog.current.contains(e.target)
    ) {
      console.log("xx");
    }
  });

  return (
    <div>
      <div ref={refDialog}>My dialog content</div>
    </div>
  );
};

您在使用中有错字。 您需要检查refDialog上是否存在当前属性。 与类的同类不同，useRef钩子不会直接返回DOM节点。

,

这是您问题的有效版本，

import React,{ useEffect } from 'react';

// YOUR OTHER IMPORT GOES HERE

const App = () => {
    const dialogRef = React.useRef(null);

    useEffect(() => {
        document.addEventListener("click",handleClickElement,false);
        // THIS WILL REMOVE THE LISTENER ON UNMOUNT
        return () => {
            document.removeEventListener("click",false);
        };
    },[]);

    const handleClickElement = event => {
        if (dialogRef.current && dialogRef.current.contains(event.target)) {
            // YOUR LOGIC
            console.log("Am Clicked!")
        }
    };
    return (
        <div>
            <Dialog ref={dialogRef}>My dialog content</Dialog>
        </div>
    )
}