Question

我使用create-react-app npm创建了react应用程序。我想在我的react app.js组件中添加vis.js的外部CDN，但我无法找到添加它的方法。我尝试在我的html页面中添加cdn，并在app.js组件中使用了一个额外的html页面并导入，但它没有用完。

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


class App extends Component {

  constructor(props) {
    super(props);
    console.log("In constructer");
  }

componentDidMount() {
  console.log("in componentDidMount");


  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ]);

  var data = {
    nodes: nodes,
    edges: edges
  };

  var options = {

    edges:{
      arrows: {
          to:     {enabled: true, scaleFactor:1, type:'arrow'},
          middle: {enabled: false, scaleFactor:1, type:'arrow'},
          from:   {enabled: false, scaleFactor:1, type:'arrow'}
      },
    },
    nodes:{
      shape:'square'
    },
    interaction:{
      dragNodes:false
    }
  };
  var network = new vis.Network(this.refs.myRef, data, options);
}

componentWillUnmount() {
  console.log("in componentWillUnmount");
}

render() {
  return (
    <div className="App">
      <Header/>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
      <div ref="myRef"></div>;
    </div>
  );
}
}

class Header extends Component {

  render() {
    return (
      <div className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>Welcome to React</h2>
      </div>
    );
  }
}


export default App;

现在我想在我的app.js中添加这个脚本，以便我可以使用新的vis。*方法。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>

如何在我的组件中添加此cdn？

Answer 1

在您的index.html文件中正常添加CDN，然后在您的React组件使用窗口中添加。*其中星号是访问此功能的函数的名称。例如，如果此CDN具有函数countSomething（），则使用window.countSomething（）调用它。

Answer 2

你能分享你加入Cdn的html页面吗？我在root html页面中成功使用了cdn，没有任何问题。

在React组件中导入外部CDN

2 个答案: