-1

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

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

4

1 回答 1

0

经过我自己的一些进一步研究，我发现这可以通过为图表创建一个React 高阶组件 (HOC)来实现。

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

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);

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

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

于 2017-10-04T22:12:16.697 回答