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 个或更多组件，并且使用它们将交互的上下文。