reactjs - react 映射错误 :"Did you wrap component with withGoogleMap() HOC?"

Question

我正在使用 react-google-maps 启动一个网络应用程序。我刚刚开始编码，但收到此错误:

Did you wrap <GoogleMap> component with withGoogleMap() HOC?
▶ 21 stack frames were collapsed.
./src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
▶ 6 stack frames were collapsed.

代码如下:

class App extends Component {
  render() {
    return (
      <div className="App">
          <GoogleMap/>
      </div>
    );
  }
}

export default App;

显然代码没有问题，可能是版本问题。这是我的依赖项:

"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-google-maps": "^9.4.5",
"react-scripts": "1.1.4"

有什么想法吗？

Answer 1

添加

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY></script>

在你的html文件中，你应该没问题(当然改变它们的键)。

或者通过 withScript() 包装脚本，如下所示:

import withScriptjs from 'react-google-maps/lib/async/withScriptjs';


const myMap = withScriptjs(withGoogleMap((props) => 
(<GoogleMap />)));