有没有正确的方法将d3.js图形集成到Facebook React应用程序中？

Question

是的,我知道有反应艺术,但它似乎被打破了.

问题是d3.js是关于改变浏览器DOM的,并且直接使用它,比如说在componentDidMount方法中,将无法正常工作,因为对浏览器DOM的所有更改都不会反映在React的虚拟DOM中.有任何想法吗？

Answer 1

一种策略可能是构建一个永远不会让React更新的黑盒组件.组件生命周期方法shouldComponentUpdate()旨在允许组件自己确定是否需要重新注册.如果你总是false从这个方法返回,React永远不会潜入子元素(也就是说,除非你调用forceUpdate()),所以这将作为一种针对React的深度更新系统的防火墙.

使用第一个调用来render()生成图表的容器,然后在componentDidMount()方法中使用D3绘制图表本身.然后,它只是更新您的图表以响应React组件的更新.虽然你可能不应该做那样的事情shouldComponentUpdate(),但我认为没有理由你不能继续从那里调用D3更新(参见React组件的代码_performUpdateIfNecessary()).

所以你的组件看起来像这样:

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

请注意,您需要在componentDidMount()方法(对于第一个渲染)以及shouldComponentUpdate()(对于后续更新)中调用图表.另外请注意,你需要一种方法来传递组件属性或状态图表,它们是针对具体情况的:在第一渲染,他们已经被设置this.props和this.state,但在以后的更新新特性目前尚未确定在组件上,所以你需要使用函数参数.

在这里查看jsfiddle .

Answer 2

React也可以直接渲染SVG元素.这是一个例子:集成React.js和D3的方法