web-dev-qa-db-ja.com

Reactコンポーネント内でCDNを使用する方法

私は同様の質問を見つけましたが、回答のいずれも理解できませんでした（そして、質問は反対票が投じられました）だから、ここに行きます：

グラフを動的にレンダリングするために、D3で構築されたGreulerと呼ばれるライブラリを使用しようとしています。 npmパッケージが壊れているようです。 Greuler CDNに切り替えたとき、index.html内のテストグラフが最終的に機能しました。

ただし、Reactアプリで作業しており、Reactコンポーネントからグラフをレンダリングする必要があります。ここで問題が発生します：反応コンポーネントがindex.htmlにあるGreuler CDNスクリプトを使用せず、コンポーネント内でスクリプトを実行する複数の方法を試しましたが、何も機能しないようです。

2つの主なエラーは次のとおりです。

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>
    );
  }
}
javascriptreactjsd3.jscdn
9
jaimefps

最良/最も簡単な解決策は、必要なスクリプトを含むスタブ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の状態とプロパティを使用してパラメーターを渡すなど）より多くのことができる単純なソリューションですが、これによりソリューションの一般的なアイデアが得られます。このコードは、ReactおよびReactDOMライブラリーを何らかの方法（babel、CDNなど）で組み込んだことも前提としています。

4
Jordan

これを試して：

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

Npmでモジュールをインストールしてみてください：

npm install greuler

ここを参照してください： https://www.npmjs.com/package/greuler

次に、コンポーネントで使用します。

var greuler = require('greuler')
0
Toby

webpack または browserify のようなmodule bundlerを使用してから、ライブラリをインポートする必要があります。

_npm install greuler_

var greuler = require('greuler')

0
Jonathan Dion