Javascript 如何根据React中传递的ref更改父级的状态？

我正在尝试实现一个应用程序范围的全局标题，该标题显示在每个路由的内容上方

我设想了一个控制头部和一组子级的父组件。标题的内容基于当前显示的子项

我想我可以通过向每个子路由发送ref来实现这一点，这些子路由将在渲染特定路由时激活。ref将获取子对象上的值并设置父对象的状态。标头是父项的子项，并将这些值作为道具，从而进行更新

不幸的是，在调用传递给子组件的ref时更新父组件的状态会导致调用ref数千次

SceneContainer
  -> Header (Controlled component, changes when scene changes)
  -> Switch (Renders a single route from children, react-router)
     -> Scene -> Route (Has ref, renders when path matches, should change content of header)
     -> Scene -> Route (same as above)
     -> etc

我希望能够在每个“场景文件”中设置一个这样的字段，以改变头部的状态。与React Native处理导航的方式类似

这是一个跨多个页面的标题，对应于它显示的任何场景的信息

my SceneContainer组件的代码如下所示：

class SceneContainer extends Component {
  constructor(props) {
    super(props)

    this.state = {
      title: "from scenecontainer",
      subtitle: "sub from scenecontainer",
    }

    this.generateReference = this.generateReference.bind(this)
  }

  generateReference() {
    return el => {
      console.log("Firing reference")

      if (el !== null) {
        const header = el.wrappedInstance.header
        this.setState(header)
      }
    }
  }

  render() {
    let newChildren = React.Children.map(this.props.children, child =>
      React.cloneElement(child, {
        generateReference: this.generateReference,
      })
    )

    return (
      <div>
        <Header title={this.state.title} subtitle={this.state.subtitle} />
        {newChildren}
      </div>
    )
  }
}

export default SceneContainer

class SceneContainer扩展组件{
建造师（道具）{
超级（道具）
此.state={
标题：“来自scenecontainer”，
字幕：“来自scenecontainer的sub”，
}
this.generateReference=this.generateReference.bind（this）
}
generateReference（）{
返回el=>{
控制台日志（“触发引用”）
如果（el！==null）{
const header=el.wrappedInstance.header
此.setState（标题）
}
}
}
render（）{
让newChildren=React.Children.map（this.props.Children，child=>
反应。克隆元素（儿童{
generateReference:this.generateReference，
})
)
返回(
{newChildren}
)
}
}
导出默认场景容器

---

“点火参考”在控制台中显示了数千次

我不明白使用

ref

的意义。为什么不直接像对象一样从数据中设置状态呢？@azium我基本上是这样做的（），但最终在转换或类似的过程中，在设置状态方面出现了不少错误。这就是为什么我要去找裁判。我会看看是否可以复制。@azium我做了一个显示错误的原始尝试示例。我想我没弄错，但你能告诉我这看起来是否正确/地道吗？