如何正确地将节点从 ref 传递到上下文？

Question

我正在尝试将节点从 ref 传递到上下文。但是因为我在第一次渲染后没有重新渲染，所以传递的节​​点是null. 我想到了两种变体（但我认为它们不是最好的）：

1. 通过ref而不是ref.current. 但是在用例中，我将被迫使用类似的东西contextRef.current而不是contextNode.

2. 使用状态（像firstRender得到一个后）重新渲染的成分ref.current。这似乎不是最优的。

什么是正确的（最好的？）方法？

代码沙盒

import React, { createContext, createRef, useContext, useEffect } from "react";
import ReactDOM from "react-dom";

const Context = createContext(null);

const App = ({ children }) => {
  const ref = createRef();

  return (
    <div ref={ref}>
      <Context.Provider value={ref.current}>{children}</Context.Provider>
    </div>
  );
};

const Child = () => {
  const contextNode = useContext(Context);

  useEffect(() => {
    console.log(contextNode);
  });

  return <div />;
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App>
    <Child />
  </App>,
  rootElement
);

Answer 1

不要传递更改时不会触发渲染的引用，而是使用保存引用的状态。这样，您可以根据需要更改子级的上下文，同时您可以正确更新值。

const App = ({ children }) => {
    const ref = useRef(null);
    const [ref_state, setRefState] = useState(null);

    useEffect(() => {
        if (!ref.current) {
            return;
        }

        setRefState(ref.current)
    }, []);

    return (
        <div ref={ref_state}>
            <Context.Provider value={ref.current}>{children}</Context.Provider>
        </div>
    );
};

如果您需要初始渲染指向该元素，您可以（以非最佳方式）将初始值设置为 HTML 元素：

const App = ({ children }) => {
    const ref = useRef(document.querySelector("#app"));

    return (
        <div id="app" ref={ref}>
            <Context.Provider value={ref.current}>{children}</Context.Provider>
        </div>
    );
};