组件之间的响应式

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