どうすればReactとD3を組み合わせることができますか？私はいつものようにD3を使いますか？

Question

私はReactアプリケーションを作成しており、カスタムメイドのD3チャートを追加する必要があります。グラフをアプリケーションのフローに組み込み、Reactコンポーネントのライフサイクルメソッドを使用したいと思っていますが、D3コードを独自の方法で書くことができるようにしたいと思います。 - 出口パターンなど）は、vxやreact-d3のようなReactコンポーネントのチャートの個々の部分を折り返さずに処理します。本当に有望と思われるreact-faux-domを、しかしこのプロジェクトは、できるだけ外部の依存関係が含まれている必要があり -

は、これまでのところ私が見つけました。

Answer 1

私自身のいくつかのさらなる研究の後、私は、これはチャートの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の削除されたバージョンと、ここでHOCを使用する非常に単純なBarChartの例を作成しました：https://jsfiddle.net/marcelk/vf51tvzf/

このアプローチは、私が望むものを正確に実現します。私はReactのライフサイクルメソッドを利用することができ、Reactの方法を継承し、チャートの動作や遷移などを管理するD3コードを書くことができます。