未定義React外部腳本方法

Question

我需要在我的React projet上導入BlotterJS ，因此我將它在index.html文件中設置為：

<script crossorigin src="https://rawgit.com/bradley/Blotter/master/build/blotter.min.js"></script>

我在componentWillMount上使用它：在componentWillMount我使用我的方法generateText生成了Blotter文本，但是它需要創建一個新的Blotter實例。 這是組件：

export class Home extends React.Component {
  constructor() {
    super()
  }
  componentWillMount() {
    this.text = this.generateText()
  }
  render() {
    return (
      <div className="container">
        <h1> Benjamin Moquet </h1>
        <div id="welcome"></div>
        <nav>
          <div className={styles.double_buttons}>
            <Link to="/about" className={`button ${styles.button_small}`}>About me</Link>
            <Link to="/work" className="button button_small">Work</Link>
          </div>
          <Link to="/contact" className="button button_large">Contact</Link>
        </nav>
      </div>
    )
  }
  generateText () {
    return new Blotter.Text("WELCOME.", {
      family : "'EB Garamond', serif",
      size : 50,
      fill : "#202020"
    })
  }
  // Things here to generate the material and create the scope, but same issue, I can't do this because it needs Blotter too
}

我收到以下錯誤： 我只想能夠使用Blotter類型。 我不知道我是否正確導入了BlotterJS。

Answer 1

嘗試使用window.Blotter而不是Blotter 。

看來您的編譯器沒有找到變量定義並拋出錯誤，但是您的邏輯似乎還不錯，所以我想這會解決它。

Answer 2

如果使用的是webpack，則需要將Blotter配置為外部庫。 請參閱webpack文檔： https ://webpack.js.org/configuration/externals/

本質上，您可以將以下內容添加到webpack.config.js中

externals: {
    Blotter: 'Blotter'
}

之后，您可以將其用作任何其他庫：

import Blotter from 'Blotter';