javascript - 如何在 React 组件中处理 script.src URL 回调？

我似乎不知道如何根据谷歌的脚本 GET 请求触发函数。

export class Map extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    };

    componentDidMount = function () {
        console.log(google); // Uncaught ReferenceError: google is not defined
    };

    scriptInitialized = function () {
        console.log('scriptInitialized');
    };

    render() {

        let scriptInitialized = function () {
            console.log('scriptInitialized');
        };

        return (
            <div>
                <script type="text/javascript">/* nothing in here works */</script>
                <script src="https://maps.googleapis.com/maps/api/js?key=key&callback=scriptInitialized" defer async={true}/>
            </div>

        );
    }
}

我似乎无法让callback=scriptInitialized工作。如果我将与 src 相关的所有 JavaScript 保留在项目的 index.html 中，它会起作用，但这会使事情变得更加复杂。如果能够将事情集中到这个组件上，那就太棒了。

我知道谷歌地图有第三方库，但如果可能的话我想避免使用它们。

这样做的唯一目标是在脚本加载完成时触发一个事件，这样我就可以使用它而不会触发“ Uncaught ReferenceError :google 未定义”。

最佳答案

来自 google api 的回调正在寻找 window.scriptInitialized。您将 scriptInitialized 绑定(bind)到组件，而不是窗口。这是一个link关于如何在React中的窗口上添加该功能

关于javascript - 如何在 React 组件中处理 script.src URL 回调？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46438478/