如何将节点从引用传递到上下文的正确程度?

Question

我正在尝试将节点从引用传递到上下文。但是因为我在第一次渲染后没有重新渲染，所以传递的节点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

与其传递在更改时不会触发渲染的 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，它将在第一次渲染中起作用。

工作代码沙箱在哪里。

我不认为这

然后是用例，我将被迫使用类似contextRef.current的东西而不是contextNode。

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

也

这样做

使用状态(类似于 firstRender(在获取 ref.current 后重新渲染组件。这似乎不是最佳的。

只是因为不使用ref.current，看起来不是一个好的做法。