为什么 useRef 从不从 null 更新 current？

如何解决为什么 useRef 从不从 null 更新 current？

问题：无法让引用从 {current: null} 更新到组件上的实际引用。

我想要发生的事情： {current: null}，据我所知，应该更新以包含 ref 所在的 div，以便能够点击它的外部（最终到关闭它）。 9 明白它不会在第一次渲染时更新，但它永远不会更新。它在页面加载时运行两次，都返回 current: null。

我尝试过的：我遵循了所有 SO 建议来使用 useEffect，然后最终将其分离到这个函数中，这似乎是最合适和最新的方法来做到这一点。它只是从不更新当前。

function useOutsideAlerter(ref) {
  useEffect(() => {

    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        console.log(ref);
      } else {
        console.log("else",ref);
      }
    }
    document.addEventListener("mousedown",handleClickOutside);
    return () => {
      document.removeEventListener("mousedown",handleClickOutside);
    };
  },[]);
}

export const Modal = (props) => {
  const [showModal,setShowModal] = useState(props.showModal);
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);

  return (
    <Layout>
      <ModalOuter
        showModal={showModal || props.showModal}
        id={styles["modalOuter"]}
        handleClose={props.handleClose}
      >
        <ModalInner
          ref={wrapperRef}
          handleClose={props.handleClose}
        >
          <Layout display="flex" flexDirection="column">
            <Layout display="flex" flexDirection="column">
              <ModalTitle title={props.title} />
            </Layout>
            <HR />
            <Layout display="flex" flexDirection="column">
              <ModalBody body={props.body} />
            </Layout>
          </Layout>
        </ModalInner>
      </ModalOuter>
    </Layout>
  );
};

ModalInner

    export const ModalInner = (props) => {
  return (
    <Layout
      id={props.id}
      ref={props.ref}
      display="flex"
      justifyContent="center"
      alignItems="center"
      padding="2rem"
      margin="2rem"
      backgroundColor="white"
    >
      {props.children}
    </Layout>
  );
};

布局组件

export const Layout = (props) => {
  return (
    <div
      id={props.id}
      ref={props.ref}
...

解决方法

问题

在 React 中，有一些特殊的“道具”，ref 和 key 是其中的几个。我在 props 周围加上引号是因为当它们作为 props 传递时，它们不会传递给子组件中的 props 对象或在其上访问。

解决方案

使用 React.forwardRef 将任何传递的 React refs 转发到功能组件，并在子组件中公开它们。

export const ModalInner = React.forwardRef((props,ref) => { // <-- access ref
  return (
    <Layout
      id={props.id}
      ref={ref} // <-- pass ref *
      display="flex"
      justifyContent="center"
      alignItems="center"
      padding="2rem"
      margin="2rem"
      borderRadius="5px"
      backgroundColor="white"
      border={`1px solid ${Color.LightGray}`}
      boxShadow={`0rem 0rem 1rem white`}
    >
      {props.children}
    </Layout>
  );
});

* 注意：Layout 和子组件同样需要转发 ref，直到您到达它实际附加到 DOMNode 的位置。

另一种解决方案是将 ref 作为普通道具传递。

<ModalInner
  wrapperRef={wrapperRef}
  handleClose={props.handleClose}
>

...

export const ModalInner = (props) => {
  return (
    <Layout
      id={props.id}
      wrapperRef={props. wrapperRef} // <-- pass wrapperRef prop
      display="flex"
      justifyContent="center"
      alignItems="center"
      padding="2rem"
      margin="2rem"
      borderRadius="5px"
      backgroundColor="white"
      border={`1px solid ${Color.LightGray}`}
      boxShadow={`0rem 0rem 1rem white`}
    >
      {props.children}
    </Layout>
  );
};

同样，您需要将 wrapperRef 道具贯穿到子节点，直到到达附加引用的实际 DOMNode。

示例

<div ref={props.wrapperRef> .... </div>

您可能还会发现 Refs and the DOM 文档对于处理 React refs 很有用。