首页 文章

如何在React组件中使用CDN

提问于
浏览 次
6

我发现了一个类似的问题，但是没有理解任何答案（并且问题被低估了）所以我在这里：

我正在尝试使用基于D3构建的库，称为Greuler，以便动态呈现图形 . 它的npm包似乎被破坏了 . 当我换掉Greuler CDN时，我的index.html里面的测试图终于奏效了 .

但是，我正在研究React应用程序，我希望从React组件呈现图形 . 这里出现问题：react组件不使用我的index.html中的Greuler CDN脚本，我尝试了多种方法在组件内运行脚本，但似乎没有任何工作 .

两个主要错误是：

error 'greuler' is not defined （在我的组件中）

Uncaught TypeError: Cannot read property 'getAttribute' of null （在D3代码中）

我的工作index.html，带有硬编码图形，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navigating Spinoza</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
    <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
    <script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <div class="row" id="demo">
      <script>
        var instance = greuler({
          target: '#demo',
          width: 480,
          height: 500,
          data: {
            nodes: [
              {id: 0, label: "E1Def3", r: 25},
              {id: 1, label: "E1P4", r: 15},
              {id: 2, label: "E1P2", r: 15},
              {id: 3, label: "E1P1", r: 15},
              {id: 4, label: "E1P5", r: 15},
              {id: 5, label: "E1P6", r: 25}
            ],
            links: [
              {source: 0, target: 1, directed: true},
              {source: 0, target: 2, directed: true},
              {source: 0, target: 3, directed: true},
              {source: 1, target: 4, directed: true},
              {source: 2, target: 5, directed: true},
              {source: 3, target: 4, directed: true},
              {source: 4, target: 5, directed: true}
            ]
          }
        }).update()
      </script>
    </div>
  </body>
</html>

我对组件中渲染功能的最后一次绝望尝试如下：

render() {
    return (
     <div class="row" id="demo">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
    <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
    <script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
     { 
        greuler({
          target: '#demo',
          width: 480,
          height: 500,
          data: {
            nodes: [
              {id: 0, label: "E1Def3", r: 25},
              {id: 1, label: "E1P4", r: 15},
              {id: 2, label: "E1P2", r: 15},
              {id: 3, label: "E1P1", r: 15},
              {id: 4, label: "E1P5", r: 15},
              {id: 5, label: "E1P6", r: 25}
            ],
            links: [
              {source: 0, target: 1, directed: true},
              {source: 0, target: 2, directed: true},
              {source: 0, target: 3, directed: true},
              {source: 1, target: 4, directed: true},
              {source: 2, target: 5, directed: true},
              {source: 3, target: 4, directed: true},
              {source: 4, target: 5, directed: true}
            ]
          }
        }).update()
      }
    </div>
      </div>
    );
  }
}
javascript reactjs d3.js cdn

4 回答

  • 0

    最好/最简单的解决方案是拥有一个存根index.html文件，其中包含您需要的脚本（您可以像其他人建议的那样从npm安装库，但这适用于只有CDN的库） . 因此，您将拥有这样的 index.html 文件：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navigating Spinoza</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
    <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
    <script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <div class="row" id="demo"></div>
  </body>
</html>

    然后像这样的反应组件（我已经移动了一些代码以更好地遵循一些反应习语）：

    var Component = React.createClass({    
  componentDidMount:function() {
    greuler({
      target: '#chart',
      width: 480,
      height: 500,
      data: {
        nodes: [
          {id: 0, label: "E1Def3", r: 25},
          {id: 1, label: "E1P4", r: 15},
          {id: 2, label: "E1P2", r: 15},
          {id: 3, label: "E1P1", r: 15},
          {id: 4, label: "E1P5", r: 15},
          {id: 5, label: "E1P6", r: 25}
        ],
        links: [
          {source: 0, target: 1, directed: true},
          {source: 0, target: 2, directed: true},
          {source: 0, target: 3, directed: true},
          {source: 1, target: 4, directed: true},
          {source: 2, target: 5, directed: true},
          {source: 3, target: 4, directed: true},
          {source: 4, target: 5, directed: true}
        ]
      }
    }).update()
  }

  render() {
    return (
      <div id="chart"></div>
    );
  }
}

ReactDOM.render(<Component />, document.querySelector('root'));

    这是一个可以做得更多的简单解决方案（例如使用react的状态和属性来传递参数），但这应该给出解决方案的一般概念 . 此代码还假定您以某种方式包含了React和ReactDOM库（babel，CDN等） .

    回复于
  • 0

    试试这个：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigating Spinoza</title>
</head>
<body>
<div id="root"></div>
<div class="row" id="demo"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js">
</script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js">
</script>
<script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
<script>
    import React from 'react'
    import { render } from 'react-dom'

    var Instance = greuler({
      target: '#demo',
      width: 480,
      height: 500,
      data: {
        nodes: [
          {id: 0, label: "E1Def3", r: 25},
          {id: 1, label: "E1P4", r: 15},
          {id: 2, label: "E1P2", r: 15},
          {id: 3, label: "E1P1", r: 15},
          {id: 4, label: "E1P5", r: 15},
          {id: 5, label: "E1P6", r: 25}
        ],
        links: [
          {source: 0, target: 1, directed: true},
          {source: 0, target: 2, directed: true},
          {source: 0, target: 3, directed: true},
          {source: 1, target: 4, directed: true},
          {source: 2, target: 5, directed: true},
          {source: 3, target: 4, directed: true},
          {source: 4, target: 5, directed: true}
        ]
      }
    }).update()

    render(
      <Instance />,
      document.getElementById('root')
    )
  </script>
</body>
</html>
    回复于
  • 4

    尝试使用npm安装模块：

    npm install greuler

    看这里：https://www.npmjs.com/package/greuler

    然后在您的组件中使用：

    var greuler = require('greuler')
    回复于
  • 1

    您需要使用 module bundler ，如webpack或browserify，然后导入库 .

    npm install greuler

    var greuler = require('greuler')

    回复于

相关问题