时间戳

首页 > 解决方案 > React - 从“兄弟”组件调用函数

javascript - React - 从“兄弟”组件调用函数

问题描述

这是我目前的型号，请检查一下，请

import component 1 & 2 

export default class App extends Component {  
  render() {    
    return (

        <Component1/>       
        <Component2/>

    );
  }
}

在组件 1 中，我有一个函数：pushData() 运行此函数后，我想在组件 2 上使用 fetchData() 执行下一步，但我找不到从 1 引用 2 的方法，因为它们不是父级-孩子？！

标签： javascriptreactjsreact-native

解决方案

这可以通过多种方式完成，考虑到上面共享的代码具有基于类的实现，我建议以下解决方案。

  • 首先将一个函数传递给 Component1，将其命名为dataPushed。
  • 其次，在 parent 中创建一个 state 变量，命名为dataPushed，初始化为 false。
  • 第三次将一个函数和一个状态变量从 parent 传递给 Component2，分别命名为dataFetched和fetchData。

现在 Component1 将有自己的函数来推送数据，我们称这个函数为 pushData。一旦推送数据的逻辑结束，调用传递的道具函数dataPushed。该道具将使用当前状态更新父状态，即推送数据并将状态变量设置为真。

现在这个状态变量已经传递给了 Component2，使用 Component 2 中的 ComponentDidUpdate。我们可以从组件 1 中知道 dataPush 的状态，如果是真的，您可以调用 Component2 内部函数来获取数据。

获取数据后，立即调用传递给此 Component2 的 prop，让父级知道已获取最新数据并将父级状态变量 dataPushed 设置为 false。

忽略使用的函数和变量名，随意使用你的。

我用代码创建了一个沙箱，

https://codesandbox.io/s/affectionate-forest-5kc68?file=/src/App.js

我希望这能解决你的问题。如果您仍然对上述任何解释感到困惑或不清楚，请告诉我。

推荐阅读