如何在React组件中使用CDN [英] how to use a CDN inside a React component
问题描述
我发现了一个类似的问题，但是不明白任何答案（问题被否决了），所以我去了：
I found a similar question, but didn't understand any of the answers (and the question was downvoted) So here I go:
我正试图使用在D3上构建的称为Greuler的库来动态呈现图形。 npm软件包似乎已损坏。当我换用Greuler CDN时，index.html中的测试图终于可以工作了。
I'm trying to use a library built on D3, called Greuler, in order to dynamically render graphs. The npm package for it seems to be broken. When I switched out for the Greuler CDN, the test graph inside my index.html finally worked.
但是，我正在开发一个React应用，我希望该图可以从React组件中渲染出来。问题出在这里：react组件未使用index.html中的Greuler CDN脚本，并且我尝试了多种方法在组件中运行脚本，但似乎无济于事。
However, I'm working on a React app, and I want the graph to be rendered from a React component. Here the problem comes up: the react component doesn't use the Greuler CDN scripts that are in my index.html, and I've tried multiple ways of running the scripts inside my component, but nothing seems to work.
两个主要错误是：
错误'greuler'未定义（在我的组件中）
未捕获的TypeError：无法读取null的属性 getAttribute （在D3代码中）
我的工作index.html带有硬编码图的样子：
My working index.html, with hard-coded graph looks like:
<!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>
我最后一次在组件中进行渲染功能的绝望尝试是：
My last desperate attempt at the render function in the component looks like:
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>
);
}
}
推荐答案
最好/最简单的解决方案是拥有一个包含所需脚本的存根index.html文件（您可以按照其他人的建议从npm安装库，但是这仅适用于仅具有CDN的库）。因此，您将有一个 index.html 文件，如下所示：
The best/simplest solution would be to have a stub index.html file which includes the scripts that you need (you could install libraries from npm as others has suggested, however this will work for libraries which only have a CDN). Thus you would have an index.html file like this:
<!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惯用法）：
And then a react component like like this (I have moved some code around to better follow some react idioms):
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库。
This is a simple solution that could stand to do more (such as use react's state and properties to pass around parameters) but this should give a general idea of the solution. This code also assumes that you have included the React and ReactDOM libraries in some way (babel, CDN, etc.).
这篇关于如何在React组件中使用CDN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
