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

Question

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

传递ref而不是ref.current。但是在用例中，我将被迫使用 contextRef.current 而不是 contextNode.
在获得 ref.current 后使用状态（类似于 firstRender）重新渲染组件。这似乎不是最优的。

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

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

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

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>
    );
};

Answer 2

我不知道，但是传递 ref.current 在第一次渲染中不起作用，但如果你只传递 ref，它将在第一次渲染中起作用。

工作在哪里codesandbox.

我不认为这

then is use cases I'll be forced to use something like contextRef.current instead of contextNode.

会是问题，会很好，因为在使用它的时候，你会知道你得到的是一个参考。

此外，

这样做

Use a state (something like firstRender) to rerender a component after getting a ref.current. This seems not optimal.

仅针对不使用 ref.current，看起来不是一个好的做法。

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

How correctly pass a node from a ref to a context?

javascript

reactjs

react-context

react-ref

react-hooks