Question

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

我将它们放在我的静态文件夹中，并尝试通过引用附加到<div />中我的组件之一的componentDidMount()中。但这似乎并未将其与我的应用捆绑在一起。我看到的只是一个带有<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

我不明白为什么不能将香草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，我只需导入即可。

如何在React应用程序中使用普通的JS小部件

2 个答案: