Question

在我的顶级组件中，有：

<NavigationComponent />
<Router>
  <Switch>
    <Route component={SomeComponent} />
    ...
  </Switch>
</Router>

现在，NavigationComponent有一个delete图标，单击该图标应调用一个函数。我希望该功能来自SomeComponent（或来自活动路径的其他一些组件）。

我尝试将所有路线都包装到上下文中，但感觉如此纠结。

其他选择是将setDeleteCallback传递给SomeComponent，这将（在componentDidMount中设置回调，然后通过渲染道具将其传递给NavigationComponent。也感到纠结。

是否有一些最佳实践来进行这种水管工程？

ps。我不需要编码解决方案，只是一个想法。

Answer 1

这个想法怎么样，对不起，就像我想编写代码时没有在注释中添加

state={onDelete:()=>{}}

onDeleteHandler=func=>{this.setState({onDelete:func})}

   <NavigationComponent onDelete={this.state.onDelete}/>
    <Router>
      <Switch>
        <Route component={()=><SomeComponent onDeleteHandler={this.onDeleteHandler}/>} />
        ...
      </Switch>
    </Router>

现在someComponent应该将其所需的删除功能发送回这里，也许在componentDidMount上，而NavigationComponent将在componentDidUpdate上将其作为新的prop

在远距离组件之间传递函数的正确方法

1 个答案: