如何在 React 组件中使用 CDN

Question

我正在尝试使用基于 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>
    );
  }
}

Answer 1

试试这个：

<!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>

Answer 2

尝试使用 npm 安装模块：

npm install greuler

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

然后在你的组件中使用：

var greuler = require('greuler')

Answer 3

您需要使用模块打包器，例如webpack or browserify，然后导入库。

npm install greuler

var greuler = require('greuler')

Answer 4

best/simplest 解决方案是有一个存根 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>

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

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 的状态和属性来传递参数），但这应该给出解决方案的总体思路。此代码还假设您已经以某种方式（babel、CDN 等）包含了 React 和 ReactDOM 库。

Answer 5

我遇到了这样的问题，但旧的答案不能运行。所以我在这里创建这个。

Url

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://fastly.jsdelivr.net/npm/webcola@3.4.0/WebCola/cola.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/greuler@1.0.0/dist/greuler.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>

JS

class Component extends React.Component {


componentDidMount() {
    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'));

console.log(React)

https://jsfiddle.net/mango3403/qk98cf0n/32

如何在 React 组件中使用 CDN

how to use a CDN inside a React component

javascript

cdn

d3.js

reactjs