React Ref Ref处于状态，好还是坏实践？如何从另一个组件上获取某些DOM元素的参考

Question

您好，我想问：在父母状态下存储裁判是“好”（好）还是不好的做法？

我需要的：

• 假设我们有父零件包装器。
• 内部包装器我有2个组件，componenta和componentB
• componenta具有一些重要元素，当它渲染时，我必须参考
• ComponentB，不幸的是，它必须从ComponentA的参考中呈现一些属性，但

不幸的是，ComponentA是无效的，并且在应用程序启动时不存在。该组件是根据其他内容动态初始化的。如果我创建Ref并将其通过包装组件中的道具将其传递，则不幸的是它仍然是无效的。在Componenta（初始化时），我可以成功地达到参考，不幸的是，包装器对其初始化不了解。

这就是为什么我要考虑而不是转发此裁判，而是考虑转发我想保留参考的状态。在Componenta中，接收参考并设置参考。这就是包装器将识别更改的裁判的方式，而我应该将REF转移到ComponentB，我将能够获得该属性。

还有什么（更好的解决方案）可以解决这个问题吗？

Answer 1

如果您需要基于该裁判

Answer 2

tl; dr：使用上下文 Elements的LifeCycles：

import { createContext, useCallback, useContext, useState } from "react";

const App = () => {
  return (
    <div className="App">
      <ComponentA />
      <ComponentB />
    </div>
  );
};

export const AppContext = createContext(null);

const Wrapper = (props) => {
  // HOC with context
  const [data, setData] = useState("Nothing typed yet.");

  return (
    <AppContext.Provider value={{ data, setData }}>
      <App {...props} />
    </AppContext.Provider>
  );
};

const ComponentA = () => {
  const { setData } = useContext(AppContext);
  const handleChange = useCallback(
    (event) => {
      setData(event.target.value);
    },
    [setData]
  );
  return <input type="text" onChange={handleChange} />;
};

const ComponentB = () => {
  const { data } = useContext(AppContext);
  return (
    <>
      <h2>Start editing to see some magic happen!</h2>
      <h1>{data}</h1>
    </>
  );
};

在这里。

nl; pr：在反应中，状态引用（不打算）可以序列化的数据值。 REF和其他功能以及其他程序引用无法序列化。这样做，打破水合。

由于两者都可以用作道具，因此会引起混乱。