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

Question

我有以下反应组件结构：

• 我的编辑器
  • 引导选项卡
    • 组件网格
      • 图 1
      • 图 2
      • 图像 x

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

componentSelected={this.props.componentSelected}

但是，在这个应用程序中，我使用的是第 3 方组件。准确地说是引导选项卡。如何通过第 3 方组件将我的 componentSelected() 函数传递给它的子组件，以便他们可以调用它？

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

谢谢！

Answer 1

没错，约定是自上而下 through props，因此您可以在 MyEditor 的 render 方法中执行类似操作：

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

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