1

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

我想要发生的事情： {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>
  );
};

模态内部

    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}
...
4

1 回答 1

2

问题

在 React 中，有一些特殊的“道具”，ref并且key是其中的几个。我放引号是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 和 DOM文档对于使用 React refs 很有用。

于 2021-06-13T18:09:57.110 回答