reactjs - React：脚本验证

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() 中加载脚本不是一个好主意。在此处查看有关生命周期的更多信息。您可以使用react-load-script包。它简化了 React 应用程序中 3rd 方脚本的加载。

例子：

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包解决了我的问题。