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是未定义的-log语句给出的是未定义。我不确定我在这里缺少什么。如果在父应用程序中定义了它，为什么在子应用程序中未定义它？这不是在兄弟姐妹之间传递引用的正确方法吗？

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;

在子代中将子对象的引用传递给父对象

1 个答案: