Question

我尝试导入带有script标签的javascript库，然后在React花括号中从中调用一个函数。我收到一个错误消息，告诉我该函数未定义。

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<p>{marked(string)}</p>

我知道我可以将库导入react App文件中，或者可以使用另一个脚本标签来调用该函数，但是我的问题是：有没有办法从React curl中调用脚本标签内定义的函数大括号？反之亦然？

Answer 1

尚不清楚您要做什么，但无法使用script标记导入库。那仅用于html。如果您确实想这样做，则必须在HTML文件中执行该脚本标记。

或者，更标准的方法是使用npm npm install myLibrary安装它，然后在jsx文件中，从`myLibrary'中导入库；

如果您有任何疑问，请告诉我。

Answer 2

您不能在React组件中包含脚本标签，而应该在HTML中包含它。

一旦包含，您应该可以将这些函数用作全局函数（如果该库被设计为按原样使用）

class Example extends React.Component {
  render() {
    return (
      <div>
        {marked("Function marked() is accessible as global function")}
      </div>
    )
  }
}

ReactDOM.render(<Example />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<!-- 
Here you include your script in the HTML, then 
you can access the functions defined in the script
as global variable inside your React components
-->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<div id="app"></div>

从花括号调用在脚本标签内定义的函数

2 个答案: