gpt4 book ai didi

javascript - 我如何在 ReactJS 中使用窗口对象?

转载 作者:可可西里 更新时间:2023-11-01 01:18:34 26 4
gpt4 key购买 nike

我想加载 Google APIs client library在我的 index.htmlonLoad='someMethod' 中将调用一个单独的 javascript 文件中的方法。然后该方法将打印到控制台。

客户端库加载没有任何问题,但消息没有从控制台打印出来,我认为这是因为根本没有调用该方法。

这是我的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
<div id="app"></div>
<script src="lib/vendors.js"></script>
<script src="build/bundle.js"></script>
<script src="https://apis.google.com/js/client.js?onload=handleGoogleClientLoad"></script>
</body>

这是包含 handleGoogleClientLoad 方法的 javascript 文件:

import React from 'react';
import ReactDOM from 'react-dom';

import {Button} from 'react-bootstrap';

class MyApp extends React.Component {

handleGoogleClientLoad() {
console.log('Success on load');
}

render() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
}


const app = document.getElementById('app');

ReactDOM.render(<MyApp />, app);

如果这是普通的 javascript,该方法将如下所示:

window.handleGoogleClientLoad = function() {
// Log to the console
};

es6中有没有类似于window对象的东西。

最佳答案

组件方法不附加到 window 对象。 MyApp.handleGoogleClientLoad 不会成为 window.handleGoogleClientLoad 的别名,Google API 脚本可能会尝试调用它。

如果您希望 Google API 在您的组件上调用一个方法,您将会遇到一些麻烦,因为无法保证您的组件会在您的 Google API 脚本加载之前或之后安装。如果你想保证你必须在组件安装后注入(inject)脚本并在 componentDidMount 方法中注册该函数。你可以使用类似 loadjs 的东西

componentDidMount() {
window.handleGoogleClientLoad = function() {
// log to console
}
loadjs('https://apis.google.com/js/client.js?onload=handleGoogleClientLoad')
}

关于javascript - 我如何在 ReactJS 中使用窗口对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37081803/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com