从功能父组件访问子函数-反应

Question

我有以下情况。父功能组件MapLayout和子类组件Map。

当用户单击某个布局元素时，我想调用Map组件内部的函数之一以使MapLayout中的地图居中。 我尝试使用createRef方法，但未成功。我正在获取空引用。我在这里做什么错了？

  function MapLayout(props) {
  const classes = useStyles(props);
  const mapReference = React.createRef();

  const onClickLocationHandler = (event, location) => {

      // center the map, call function from map
      console.log(mapReference.current); // this is null

    }
  };

  return (
    <div className={classes.root}>
      <Map
        ref={mapReference}
        onClickLocationHandler={onClickLocationHandler}
      ></Map>)}