我怎样才能最好地结合React和D3，但仍然像我一直使用D3一样？

-1

我正在创建一个React应用程序，需要添加一些自定义的D3图表。我想将图表合并到应用程序'流程'中，并使用React组件生命周期方法，但我也希望能够像我习惯的那样以自己的方式编写D3代码（输入 - 更新 - 退出模式等），而不包裹React组件中的单个部分，如vx或react-d3正在执行。我怎样才能最好地结合React和D3，但仍然像我一直使用D3一样？

到目前为止，我发现 - react-faux-dom这似乎很有前途，但该项目需要包含尽可能少的外部依赖性。

来源

2017-10-04 marcel-k

第一个Google搜索结果：[与React和D3交互的应用程序]（https：// medium .com/@ Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71） –

没有看到你做了什么，我们无法就任何事情提供建议。询问例子是关键问题，所以我们不能这样做。您的问题对于SO平台来说过于宽泛，在这个平台上，您可以提出具体的问题，并提供具体的答案：https：//stackoverflow.com/help/how-to-ask – Rob

@ChaseDeAnda您的权利。其实其中一个帖子是我根据自己的回答。只是想我会在这里分享我自己的解决方案。 –

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

HOC将像基本/包装组件一样工作，通过图表数据并在必要时增强任何属性。使用阵营的生命周期方法，它调用类似的方法（创建，更新，销毁）的图表实例，可以仅仅把像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和一个非常简单的BarChart示例，它使用HOC：https://jsfiddle.net/marcelk/vf51tvzf/

所以这种方法实现了我想要的。我可以使用React的生命周期方法，传递道具React方法，并且仍然编写D3代码来管理图表的行为，转换等。

来源

2017-10-04 22:12:16

我怎样才能最好地结合React和D3，但仍然像我一直使用D3一样？

回答

相关问题