reactjs - 我可以使用一个状态来引用另一个子组件中一个子组件的状态吗？

Question

由于我正在处理的应用程序的架构，我需要访问另一个子组件中的一个子组件的状态，并且我不能将这些状态带到父级或使用 react-redux。因此，我使用了一种技术，将指向目标子状态的指针存储在父级中。
在父级中，我为指针创建状态:

export default function App() {
const [compOneStatePointers, setCompOneStatePointers] = useState({});
  return (
    <div className="App">
      <CompOne setCompOneStatePointers={setCompOneStatePointers}></CompOne>
      <CompTwo compOneStatePointers={compOneStatePointers}></CompTwo>
    </div>

在 CompOne 中，我创建状态并将此状态的指针保存在父级的“compOneStatePointers”状态中。

    const [state, setState] = useState(0);
    useEffect(() => {
        setCompOneStatePointers((prev) => {
          const temp = { ...prev };
          temp.state = state;
          temp.setState = setState;
          return temp;
       });
    }, [setCompOneStatePointers, state]);

之后，我可以在 CompTwo 中使用来自 CompOne 的状态。像这样:

    <button className="button" onClick={() => {
        props.compOneStatePointers.setState(prev=> prev+1)
    }}>Change state of Comp One</button>

这种技术的例子: https://codesandbox.io/s/state-pointers-object-62dkl?file=/src/CompTwo.js
问题是，我可以这样做还是有陷阱？

Answer 1

react js 中有一个 Context API 的概念，它提供了一种将数据传递给你的 react 应用程序中的所有组件(称为组件树)的方法，而无需显式地将 props 传递到组件的所有级别。
您可以从 Reactjs 的官方文档 https://reactjs.org/docs/context.html#when-to-use-context 中阅读相同的概念.
从生产的角度来看，最好使用 Context API 将日期从一个组件传递到另一个组件。在现实生活中的 React 应用程序中，会有 100 个或更多组件，并使用它们将交互的上下文。