将 React 类组件迁移到函数组件 (React-google-maps)

Question

我正在将react-google-maps库用于一个项目，我找到了一个完美的例子来满足我的需求。它是下面的代码，正如您所看到的，它是一个类组件。class Map extends Component {  constructor(props){    super(props);    this.map = React.createRef();  }  render() {    const MyGoogleMap = withScriptjs(      withGoogleMap(props => (        <GoogleMap          ref={map => {            this.map = map;          }}        />      ))    );    return(      <MyGoogleMap />    );  }}export default Map我想在函数组件中迁移这个类。我不知道如何实现功能组件的行是this.map = React.createRef();和ref={map => { this.map = map }}

Answer 1

在Function Component 中，您使用useRef钩子。

useRef&之间有细微的区别createRef：请参阅这篇文章。

`useRef` 和 `createRef` 有什么区别？

确保this.在函数组件中删除。

function Map() {

  const mapRef = useRef();

  const MyGoogleMap = withScriptjs(

    withGoogleMap(props => <GoogleMap ref={mapRef} />)

  );

  return <MyGoogleMap />;

}