javascript - 向下传递功能2级的设计不好吗？有什么替代品？

我有一个带有componentA的场景，而这个componentA有另一个带有应更新场景的按钮的componentB。

我的第一个猜测是将功能从场景传递到CompoenentA的co componentB，但是我是React的新手，我敢肯定有更好的方法。

ComponentB应该如何要求在整个场景上进行更新？

最佳答案

我不认为您描述的设计不好，但是，如果您不满意它，可以尝试将ComponentB暴露给Scene，因此Scene可以将回调直接传递给ComponentB ：

// Scene.js
render() {
  <ComponentA>
    <ComponentB onCallback={this.callback} />
  </ComponentA>
}

// ComponentA.js
render() {
  <div>
    {this.props.children} // render ComponentB, or whatever you pass as children of ComponentA
  </div>
}

如果ComponentA必须将道具传递给ComponentB，请考虑将这些道具移动到Scene组件。

这是菜单等组件的常见模式：

// App.js
render() {
  <Menu>
    <MenuItem onClick={this.handleMenuItem1Click} />
    <MenuItem onClick={this.handleMenuItem2Click} />
    <MenuItem onClick={this.handleMenuItem3Click} />
  </Menu>
}

// Menu.js
// <Menu> wraps its children in a styled div, and maybe add more behavior like expanding and collapsing
render() {
  <div>
    {this.props.children} // render MenuItem's
  </div>
}