反应中的脚本加载 [英] Script load in react
问题描述
我想从 CDN 加载脚本,然后在 React 中执行该脚本公开的函数:
I want to load the script from a CDN and then execute a function exposed by that script in React:
componentWillMount() {
console.log('componentWillMount is called');
const script = document.createElement('script');
script.src = 'https://foo.azurewebsites.net/foo.js';
document.body.appendChild(script);
}
componentDidMount() {
console.log('componentDidMount is called');
window.foo.render({
formId: '77fd8848-791a-4f13-9c82-d24f9290edd7',
}, '#container');
}
render() {
console.log('render is called');
return (
<div id="container"></div>
);
}
脚本有时需要时间来加载(通常是第一次),当 componentDidMount()
被调用时,foo"不可用,我收到这样的错误:
The script sometimes takes time to load (generally first time) and when componentDidMount()
is called "foo" is not available and I get an error like this:
TypeError: 无法读取未定义的属性 'render'
TypeError: Cannot read property 'render' of undefined
如何确保在成功加载脚本后调用 componentDidMount()
?
How can I assure that componentDidMount()
is called once the script is loaded successfully?
推荐答案
我认为在 componentWillMount() 或 componentDidMount() 中加载脚本不是一个好主意,根据 React 组件规范和生命周期.
I don't think it's a good idea to load scripts in componentWillMount() or componentDidMount(), according to React Component Specs and Lifecycle.
以下代码可能对您有所帮助.
The code below may help you.
function new_script(src) {
return new Promise(function(resolve, reject){
var script = document.createElement('script');
script.src = src;
script.addEventListener('load', function () {
resolve();
});
script.addEventListener('error', function (e) {
reject(e);
});
document.body.appendChild(script);
})
};
// Promise Interface can ensure load the script only once.
var my_script = new_script('http://example.com/aaa.js');
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
status: 'start'
};
}
do_load = () => {
var self = this;
my_script.then(function() {
self.setState({'status': 'done'});
}).catch(function() {
self.setState({'status': 'error'});
})
}
render() {
var self = this;
if (self.state.status === 'start') {
self.state.status = 'loading';
setTimeout(function () {
self.do_load()
}, 0);
}
return (
<div>{self.state.status} {self.state.status === 'done' && 'here you can use the script loaded'}</div>
);
}
}
这篇关于反应中的脚本加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!