Question

我正在使用React和Meteor。我目前正在构建一个应用程序，它已经发展到拥有相当数量的组件（有些嵌套非常深，例如5个或更多级别）。

我经常发现自己必须将父项中的道具一直传递给子项，只是为在最顶层父项中呈现的组件调用组件方法，如下所示：

父文件

openDialog() {
  this.setState({ open: true });
}

render() {
  return (
    <div>
      <Dialog open={ this.state.open } />
      <ChildComponent openDialog={ this.openDialog.bind(this) } />
    </div>
  );
}

ChildComponent

render() {
  return (
    <div>
      <GrandChildComponent openDialog={ this.props.openDialog } />
    </div>
  );
}

依此类推，只需调用最顶层父级定义的openDialog方法即可。

如果你只有一个分支向内深入，这是有效的。但是，如果您说，可以从站点的许多不同部分（标题，侧栏，内联链接等）触发的登录模式对话框，将这种方式的道具传递到可能需要的每个组件中显然是不切实际的。链接（或不）。

处理此类问题的正确（推荐）方法是什么？

Answer 1

常见的解决方案是将组件链接到外部操作集和外部状态管理器。 Flux architecure用于此目的。一些框架，如Redux，可以帮助您将它与React集成。

使用flux，您可以从每个组件调度一个动作（例如openDialog），而不必将其传递给整个组件树。

在React中调用许多其他组件中的组件方法的正确方法是什么？

1 个答案: