私はロードするGoogle APIのクライアントライブラリを自分の内側index.htmlとonLoad='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オブジェクトにアタッチされません。これは、Google APIスクリプトが呼び出しを試みている可能性MyApp.handleGoogleClientLoadがあるエイリアスになりませんwindow.handleGoogleClientLoad。
Google APIがコンポーネントのメソッドを呼び出すようにしたい場合、Google APIスクリプトがロードされる前または後にコンポーネントがマウントされる保証がないため、問題が発生します。コンポーネントがマウントされた後にスクリプトを挿入し、componentDidMountメソッドに関数を登録する必要があることを保証したい場合。あなたはloadjsのようなものを使うことができます
componentDidMount() {
window.handleGoogleClientLoad = function() {
// log to console
}
loadjs('https://apis.google.com/js/client.js?onload=handleGoogleClientLoad')
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加