Javascript 如何在 ReactJS 中使用 window 对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37081803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use the window object in ReactJS?
提问by hellomoto
I want to load the Google APIs client libraryinside my index.htmland the onLoad='someMethod'will invoke a method in a separate javascript file. That method will then print out to the console.
我想在我的内部加载Google API 客户端库index.html，onLoad='someMethod'并将调用单独的 javascript 文件中的方法。然后该方法将打印到控制台。
The client library is loaded without any problems but the message is not getting printed out the console and I think it's because the method is not getting invoked at all.
客户端库加载没有任何问题，但消息没有打印出控制台，我认为这是因为根本没有调用该方法。
Here is my index.html:
这是我的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>
Here is the javascript file that contains the handleGoogleClientLoadmethod:
这是包含该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);
If this was plain javascript the method would look like this:
如果这是普通的 javascript，则该方法将如下所示：
window.handleGoogleClientLoad = function() {
// Log to the console
};
Is there anything in es6 that is similar to the the windowobject.
es6 中是否有与window对象类似的东西。
采纳答案by Aweary
Component methods are not attached to the windowobject. MyApp.handleGoogleClientLoadis not going to be aliased to window.handleGoogleClientLoadwhich is what the google API script is likely trying to invoke.
组件方法不附加到window对象。MyApp.handleGoogleClientLoad不会被别名为window.handleGoogleClientLoadgoogle API 脚本可能试图调用的内容。
If you want the Google API to call a method on your component you're going to have some trouble as there's no guarantee that your component will be mounted before or after your Google API script loads. If you want to guarantee that you'd have to inject the script after the component mounted and register the function in the componentDidMountmethod. You can use something like loadjs
如果您希望 Google API 在您的组件上调用一个方法，您将遇到一些麻烦，因为无法保证您的组件将在您的 Google API 脚本加载之前或之后安装。如果你想保证你必须在组件安装后注入脚本并在componentDidMount方法中注册函数。你可以使用类似loadjs 的东西
componentDidMount() {
window.handleGoogleClientLoad = function() {
// log to console
}
loadjs('https://apis.google.com/js/client.js?onload=handleGoogleClientLoad')
}
回答by PhilVarg
the windowobject will still be available to you from your react component.. but the issue is that your defining your function just fine, but you're not calling it anywhere (is that jsonp syntax in the url of that script?). if you want that function to execute when you mount your component, you can make use of the component lifecycle hooks, specifically, componentDidMount
该window对象仍然可以从您的 React 组件中使用。但问题是您定义的函数很好，但您没有在任何地方调用它（该脚本的 url 中是否有 jsonp 语法？）。如果您希望在挂载组件时执行该功能，则可以使用组件生命周期钩子，特别是，componentDidMount
class MyApp extends React.Component {
handleGoogleClientLoad() {
console.log('Success on load');
}
componentDidMount(){
this.handleGoogleClientLoad();
}
render() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
}
if you want to keep the syntax you already have, then you can go ahead and access the windowthe way you suggest, but its thats definitely not a very react way of doing it
如果你想保留你已经拥有的语法，那么你可以继续window按照你建议的方式访问，但这绝对不是一种非常反应的方式
