将引用从子代传递到父代，再在React中将子代传递给子代

Question

我正在尝试从孩子那里提取参考，并使其在我的应用中的其他位置可用。这是我的父组件：

class App extends React.Component {

   setRef = (ref) => {
      this.mapReference = ref
      console.log(this.mapReference);
   }

   render () {
      return (
         <div className="App">
            <Map setRef={this.setRef} />
            <UIWindow mapRef={this.mapReference} />
         </div>
      )
   }
}

export default App;

并且引用来自setRef组件中的回调<Map />函数，如下所示：

class Map extends React.Component {


   componentDidMount(){
      this.props.setRef(this.refs.map.leafletElement)
   }

   render () {

      const { position, zoom } = this.props

      return(
         <LeafletMap
            className="sidebar-map" 
            center={position} zoom={zoom} id="mapId" 
            ref={"map"}
         >


         </LeafletMap>
      )
   }
}

<App />中的console.log语句正确返回了我的引用，它是一个映射对象。因此，我的引用已正确地从子级（<Map />）传递到父级（<App />），并且在那里可用。如您所见，我正在尝试将该引用传递回我的<UIWindow />，以便在那里访问它。

class UIWindow extends React.Component {

   componentDidMount() {
      console.log(this.props.mapRef);
   }

   render () {
      return(
         <div className="UIWindow">
            <Header />
            <ControlLayer />
         </div>
      )
   }
}

export default UIWindow;

但是在我的UIWindow中，this.props.mapRef未定义-日志语句给出了未定义。我不确定我在这里缺少什么。如果在父应用程序中定义了它，为什么在子应用程序中未定义它？这不是在兄弟姐妹之间传递引用的正确方法吗？

Answer 1

React在重新渲染时不知道this.mapReference是什么，因为变量与该类的实例相关联。您可以声明状态并将其传递给子级：

class App extends React.Component {
   state = { mapReference: null }   

   setRef = ref => {
      this.setState({ mapReference: ref }, () =>
      console.log(this.state.mapReference)
     ); //Log once reference is updated
   };       

   render () {
      return (
         <div className="App">
            <Map setRef={this.setRef} />
            {this.state.mapReference && <UIWindow mapRef={this.state.mapReference} />}
         </div>
      )
   }
}

export default App;