Update/refresh 一个组件使用另一个组件

Question

对于这个问题，我很抱歉，但我是新手，并试图找到关于如何从另一个 class 组件更新另一个 class 组件的最佳实践。

例如，我有 AddItem.js 和 ViewItem.js，但路线相同。我正在通过重新渲染（componentDidMount（））更新 ViewItem.js ListGroup。如何使用 AddItem.js 按钮 onClick 执行此操作？

Answer 1

您可以在父级中获取一个新状态 属性 并将其作为道具传递给 AddItem 和 ViewItem 并将该道具用作这两个组件的状态，并且在您的按钮单击事件中您可以更改状态并且 React 在状态更改时自动呈现组件。

看这个简单example

Answer 2

如果 ViewItem 和 AddItem 是兄弟姐妹，那么您可以使用另一个组件的 ref 调用彼此的方法 use ref doc

或 你也可以用父组件包装两个子组件并使用父状态。

如果 Viewitem 和 Additem 是父子关系，反之亦然，那么您可以使用 pass props 并根据 props 的变化改变状态。

Answer 3

可以通过在 AddItem.js 和 ViewItem.js 之上创建一个父 class（例如 Home.js）并在点击时将数据作为 props 传递给子组件。

如果您使用的是 React 和 Redux，单击按钮会变得相对简单，您可以调用 action.js 中的方法，该方法会将带有负载数据的操作分派给 reducer，我们可以这样做吗通过在 ViewItem.js 和 AddItem.js 中添加 mapStatetoProps() 来使用，因此一旦您在 props 变量中收到数据，它将 reload/refresh 该特定组件。