如何在 React 应用程序中使用纯 JS 小部件

Question

我需要将一个普通的 JS 组件嵌入到我的 React 应用程序中，该组件是一个带有它自己的方法的输入。 我有一个缩小的.js和.css文件及其.map文件。

我将它们放入我的 static 文件夹中，并尝试通过参考将 append 放到我在componentDidMount()中的一个组件中的<div />上。 但它似乎没有将它与我的应用程序捆绑在一起。 我所看到的只是一个带有<script />和<link />标签的空 div。

  componentDidMount () {
    const script = document.createElement('script')
    const link = document.createElement('link')

    script.type = 'text/javascript'
    script.src = 'static/my-component.js'
    script.async = true

    link.href = 'static/my-component.css'
    link.rel = 'stylesheet'

    this.el.appendChild(script)
    this.el.appendChild(link)
  }

render () {
    return (
      <div ref={el => (this.el = el)} />
    )
}

Answer 1

我不明白为什么你不能将 vanilla JS 组件放入你的 React 应用程序中。 造成这种情况的主要原因是什么？

Answer 2

我通过以下方式实现了一个插件（ics.js）

1）我在以下位置创建了一个新模块：

/utilities/ics.js

export const ics = () => {
// plugin code here
}

2）从我的组件中，我已经导入了我的插件

import { ics } from './utilities/ics' // use the right path

3）在我的组件中，我在需要的地方使用了插件：

const cal = ics() // works

让我知道这是否有帮助。

当谈到 css 时，我会简单地导入它。