Question

我是React的新手。我使用的是v0.13.3。我有一个功能页面（index.html链接到外部css文件和外部js文件）。一切都很棒。

JS文件正好包含此JSFIDDLE的JavaScript窗格中的内容。（道歉，小提琴没有运行，我无法弄清楚为什么控制台说Uncaught SyntaxError: Unexpected token <。我在顶部有/** @jsx React.DOM */，但无论如何......它制作了一张图表。）

问题：我如何获得

中的内容

var data = [{"letter":"A","frequency":0.08167},"letter":"B","frequency":0.01492},{"letter":"C","frequency":0.02782},{"letter":"D","frequency":0.04253},...]

来自外部JSON文件而不是？（如果JSON文件的内容发生变化，我希望图表更新。）

（我意识到可以选择使用React将d3图表的所有部分分解为单独的组件，并以一种方式执行，而不是在一个函数中使用所有d3。但是现在，我想要它保持这种方式 - 基于this article的结论。）

因此，在d3.json(path/to/file.js)内使用function createChart无效。我已经尝试了在{Hook Up the Data Model'和“从服务器中获取”下的this tutorial中的内容，但我没有任何运气。另外，看了this article。我怀疑我需要对componentDidMount和shouldComponentUpdate执行其他操作，但有点困惑。搜索其他示例，但无法找到这样的例子。感谢您的任何建议。

Answer 1

JSFiddle中代码的一个问题是您使用shouldComponentUpdate函数。根据{{3}}，这应该只返回一个布尔告诉React是否重新渲染而不是尝试更新DOM本身。要回复道具更新，您可能会在这种情况下使用componentDidUpdate。

通常，如果你需要在React组件中做任何异步操作，它应该在componentDidMount函数中进行，所以你在那里正确的路径。

另一方面，我会尝试createChart()你有d3.select("body") - 您可以选择从React传递的<div>作为dom道具并附加{ {1}}直接在那里，这将是一个更合适的使用React的方式（组件应该是自包含的，所以他们不会在自己之外修改DOM。尝试<svg>。

希望这有用！

PS：使用此Plunkr模板创建了React片段，我获得了一些不错的结果：https://facebook.github.io/react/docs/component-specs.html

使用react和d3

1 个答案: