组件之间响应

Question

我构建了一个动画框并在里面存储了图表。该图表将响应动画。

我在图表组件中使用此代码控制响应速度。

  onclick = function () {
  myChart.resize();
};

问题出在处理多个图表时。我构建了一个存储在另一个动画框中的图表。 我想通过单击来调整这两个图表的大小，但是没有用。

我一直在努力弄清楚如何在组件之间传递数据，但到目前为止我似乎无法让它工作。有没有人有更好的方法来做到这一点？

・这是我的代码

https://codesandbox.io/s/echarts-test2-3vg2t?file=/src/chart.js

Answer 1

关于数据以及如何在同级组件中访问数据。

关于 React，我们必须注意一些事情。

1. React 遵循单向数据流（这意味着数据是通过 props 从父级传递给子级的，而不是相反）。
2. 仅使用 React（没有任何库），当我们在单个组件中有数据时，我们可以访问兄弟姐妹中的数据。因此，您需要提升状态（使用父组件中的所有组件数据并将它们作为道具传递）。
3. 另一种选择是使用像 Redux 这样的库，它具有单一的真实来源，并且所有数据都在 Store 中，组件可以从中直接访问数据，而无需向下传递 props（或没有 prop-drilling）。
4. 同样可以通过在 React 中使用 React-Hooks 和 Context API 来实现。

这些来自 React 的官方文档可能会有所帮助：

1. https://react-redux.js.org/introduction/getting-started
2. https://reactjs.org/docs/hooks-reference.html