Question

所以我有一个组件可以渲染两个360图像。该组件几乎已经完成，但还有两件事要做，我无法理解。

所以这里是安装脚本的代码块：

componentDidMount() {

    if(this.threesixty_interior){
        const s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'source/player.js';
        s.dataset.interior = true;
        s.dataset.subject = this.props.subject;
        this.threesixty_interior.appendChild(s);
    }

    if(this.threesixty_exterior){
        const s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'source/player.js';
        s.dataset.exterior = true;
        s.dataset.subject = this.props.subject;
        this.threesixty_exterior.appendChild(s);
    }
}

这就是我渲染它们的方式：

render() {
    return(
    <div className="player">
        <div ref={el => (this.threesixty_interior = el)} />
        <div ref={el => (this.threesixty_exterior = el)} />
    </div>
    )
}

所以我想做的是以下内容。我有一个子组件，我在其中播放加载动画。所以我想简单地检查两个脚本是否正确安装并删除该加载动画。我怎么做？？这甚至是在您的反应应用程序中调用脚本的好方法吗？

Answer 1

我认为在componentWillMount（）或componentDidMount（）中加载脚本并不是一个好主意。详细了解生命周期here。您可以使用react-load-script包。它简化了React应用程序中第三方脚本的加载。

示例：

import Script from 'react-load-script'

...

render() {
  return (
    <Script
      url="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
      attributes={{id: 'someId', 'data-custom: 'value'}}
      onCreate={this.handleScriptCreate.bind(this)}
      onError={this.handleScriptError.bind(this)}
      onLoad={this.handleScriptLoad.bind(this)}
    />
  )
}

Answer 2

对于查看此问题的任何人，react-script-tag包解决了我的问题。

反应：脚本验证

2 个答案: