通过 3rd 方反应组件传递数据

Question

我有以下反应组件结构：

• 我的编辑器
  • Bootstrap 选项卡
    • 组件网格
      • 图片 1
      • 图 2
      • 图片 x

在 myEditor 组件中，我有一个设置状态的函数 componentSelected()。在我编写了每个组件的应用程序中，我只是将 componentSelected() 函数作为道具传递给组件树并从图像对象中调用它。

componentSelected={this.props.componentSelected}

但是，在此应用中，我使用的是第 3 方组件。 Bootstrap 标签是准确的。我如何通过第 3 方组件将我的 componentSelected() 函数传递给它的子组件以便他们可以调用它？

这导致了一个单独的问题。我误解了 React 吗？我可以在 React 组件树上调用一个函数而不将它作为 prop 传递给组件吗？如果可以，怎么做？

谢谢！

Answer 1

没错，convention 从上到下一直到 props，因此您可以在 MyEditor 中的渲染方法中执行类似的操作：

<BootstrapTabs> <ComponentGrid componentSelected={this.props.componentSelected}> ... </ComponentGrid> </BootstrapTabs>

编辑：您绝对可以在不更改源代码的情况下向您的 BootstrapTabs 添加额外的道具，但您也可以节省额外的道具传递级别，除非您的选择操作发生在该级别。