我怎样才能最好地将 React 和 D3 结合起来，但仍然像往常一样使用 D3？

Question

我正在创建一个 React 应用程序，需要添加一些自定义的 D3 图表。我想将图表合并到应用程序“流程”中并利用 React 组件生命周期方法，但我也希望能够像我习惯的那样以自己的方式编写 D3 代码（输入 - 更新- 退出模式等），而不像 vx or react-d3 那样在 React 组件中包装图表的各个部分。

到目前为止我发现 - react-faux-dom 这看起来很有希望，但项目需要包含尽可能少的外部依赖项。

Answer 1

经过我自己的进一步研究，我发现这可以通过为图表创建 React Higher-Order Component (HOC) 来实现。

HOC 将充当基础/包装器组件，传递图表数据并在必要时增强任何属性。使用 React 的生命周期方法，它在图表实例上调用类似的方法（创建、更新、销毁），可以像 ES6 class 或函数一样编写，只要它实现正确的方法

function withChart(ChartComponent) {
    class ChartHOC extends React.Component {

        constructor(props) {
          super(props);

          this.chart = new ChartComponent();
        }

        componentDidMount() {            
            this.chart.create(this.container);
        }

        componentDidUpdate() {            
            this.chart.update();
        }

        render() {
          return (
            <div className='chartContainer'ref={(el) => { this.container = el; }}></div>);
        }
    }

    return ChartHOC;
}

class BarChart { 
    // Mandatory function when using chartHOC
    create(containerEl) {
        ...
    }

    // Mandatory function when using chartHOC  
    update(props) {
    ...
    }
}

// wrap the barChart with the chartHOC
const Example = withChart(BarChart);

我制作了一个 fiddle chartHOC 的精简版本和一个使用 HOC 的非常简单的 BarChart 示例：https://jsfiddle.net/marcelk/vf51tvzf/

所以这种方法完全达到了我想要的效果。我可以利用 React 的生命周期方法，以 React 的方式传递道具，并仍然编写 D3 代码来管理图表的行为、转换等。

我怎样才能最好地将 React 和 D3 结合起来，但仍然像往常一样使用 D3？

How can I best combine React and D3 but still use D3 like I always have?

javascript

reactjs

d3.js

higher-order-components