Javascript 如何在React项目中加载GooglePlacesJSAPI库？

我正在使用“react places autocomplete”库。我知道我必须使用我的密钥加载API。我不知道该将密钥的脚本放在哪里，这样程序才能运行

我看到一个StackOverflow页面，有人说要在index.js中静态加载它，我尝试了：

import 'react-places-autocomplete';
...
ReactDOM.render(
    <div>
    <BrowserRouter>
        <App />
    </BrowserRouter>
    <script src="https://maps.googleapis.com/maps/api/js? 
     key=MY_KEY&libraries=places"></script>
    </div>
    , document.getElementById('root'));

import'react places autocomplete'；
...
ReactDOM.render(
，document.getElementById（'root'）；

这不起作用，我还尝试将其直接加载到组件中（这似乎不正确）：

class My_组件扩展React.Component{
...
render（）{
返回(
....
);
}
}

---

使用这些方法，我不断得到“GoogleMapsJavaScriptAPI库必须加载”错误，并且我查看了文档，它没有指定标签需要放置在哪里，只是它需要放在某个地方

我在我的一个项目中就这样使用过它

class PlacesAutocomplete1 extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    googleMapsReady: false,
  };
}

componentDidMount() {
    script is loaded here and state is set to true after loading
    this.loadGoogleMaps(() => {
    // Work to do after the library loads.
    this.setState({ googleMapsReady: true });
  });
}

componentWillUnmount() {
  // unload script when needed to avoid multiple google scripts loaded warning
  this.unloadGoogleMaps();
}

loadGoogleMaps = callback => {
    const existingScript = document.getElementById("googlePlacesScript");
    if (!existingScript) {
        const script = document.createElement("script");
        script.src =
            "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places";
        script.id = "googleMaps";
        document.body.appendChild(script);
        //action to do after a script is loaded in our case setState
        script.onload = () => {
            if (callback) callback();
        };
    }
    if (existingScript && callback) callback();
};

unloadGoogleMaps = () => {
    let googlePlacesScript = document.getElementById("googlePlacesScript");
    if (googlePlacesScript) {
        googlePlacesScript.remove();
    }
};

render() {
    if (!this.state.googleMapsReady) {
        return <p>Loading</p>;
    }
    return (
        // do something you needed when script is loaded
}

class PlacesAutocomplete1扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
谷歌地图编辑：错，
};
}
componentDidMount（）{
脚本在此处加载，加载后状态设置为true
这个.loadGoogleMaps（（）=>{
//加载库后要做的工作。
this.setState（{googlemapsrady:true}）；
});
}
组件将卸载（）{
//在需要时卸载脚本以避免多个google脚本加载警告
这个。unloadGoogleMaps（）；
}
loadGoogleMaps=回调=>{
const existingScript=document.getElementById（“googlePlacesScript”）；
如果（！existingScript）{
常量脚本=document.createElement（“脚本”）；
script.src=
"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places";
script.id=“谷歌地图”；
document.body.appendChild（脚本）；
//在我们的案例setState中加载脚本后要执行的操作
script.onload=（）=>{
if（callback）callback（）；
};
}
if（existingScript&&callback）callback（）；
};
unloadGoogleMaps=（）=>{
让googlePlacesScript=document.getElementById（“googlePlacesScript”）；
如果（Google PlacesScript）{
googlePlacesScript.remove（）；
}
};
render（）{
如果（！this.state.googleMapsReady）{
返回加载；
}
返回(
//在加载脚本时执行所需的操作
}

你也可以参考这个，非常感谢，你帮了我一个大麻烦。这基本上是你需要使用这个库的任何时候都可以使用的样板文件吗？我在文档中没有看到类似的东西。在react中有很多方法可以实现这一点。你可以说这是其中之一。如果你的问题解决了，请使用勾号接受答案ueryThe id似乎是错误的，create和getElementById上的id应该是相同的

class PlacesAutocomplete1 extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    googleMapsReady: false,
  };
}

componentDidMount() {
    script is loaded here and state is set to true after loading
    this.loadGoogleMaps(() => {
    // Work to do after the library loads.
    this.setState({ googleMapsReady: true });
  });
}

componentWillUnmount() {
  // unload script when needed to avoid multiple google scripts loaded warning
  this.unloadGoogleMaps();
}

loadGoogleMaps = callback => {
    const existingScript = document.getElementById("googlePlacesScript");
    if (!existingScript) {
        const script = document.createElement("script");
        script.src =
            "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places";
        script.id = "googleMaps";
        document.body.appendChild(script);
        //action to do after a script is loaded in our case setState
        script.onload = () => {
            if (callback) callback();
        };
    }
    if (existingScript && callback) callback();
};

unloadGoogleMaps = () => {
    let googlePlacesScript = document.getElementById("googlePlacesScript");
    if (googlePlacesScript) {
        googlePlacesScript.remove();
    }
};

render() {
    if (!this.state.googleMapsReady) {
        return <p>Loading</p>;
    }
    return (
        // do something you needed when script is loaded
}