componentDidUpdateの参照は定義されていません

Question

私のウェブサイトでChart.jsを使用したいと思います。タイトルを見ると、私はReact.jsを使っています。

let context = document.getElementById('canvas').getContext('2d'); 
let chart = new Chart(context, ...); 

ので、私はこのようなコンポーネントを設計します：Chart.jsを使用するには、私はこのようなキャンバスとコンテキスト必要

export function updateChart() { 
    let context = this.refs.chart.getContext('2d'); 
    let chart = new Chart(context ,...); 
    ... 
} 

export default class GraphChart extends React.Component { 
    constructor() { 
     super(); 
     updateChart = updateChart.bind(this); 
    } 
    componentDidMount() { 
     updateChart(); 
    } 
    render() { 
     return <canvas ref="chart" className="chart"></canvas>; 
    } 
} 

あなたが見ることができるように、私は二つのことをエクスポートし、更新チャート機能GraphChartクラスです。直接チャートを更新するためにエクスポートupdateChart関数を使用して

import { updateChart } from './GraphChart'; 
import GraphChart from './GraphChart'; 

class Graph extends React.Component { 
    ... 
    someKindOfAction() { 
     // update chart from here! 
     updateChart(); 
    } 
    render() { 
     return (
      <div> 
       <SomeOtherComponents /> 
       <GraphChart /> 
      </div> 
     ); 
    } 
} 

、親クラス：双方は、このような親コンポーネントで使用されます。それは働いていたが、初めてだった。 GraphChartコンポーネントをアンマウントしてマウントした後、それはただ空です。

なぜrefsが空ですか？私が間違っていた場合、Chart.jsを初期化するためのキャンバスコンテキストを取得するにはどうすればよいですか？

Answer 1

オブジェクトrefsは、定義されていません。thisはあなたの考えではありません。それを記録してみてください。

エクスポートする機能は、コンポーネントのthisにバインドされていません。あるいは、それはあなたのコンポーネントの最後に作成されたインスタンスです。あなたはそれがマウントされたインスタンスであることを決して確かめることはできません。また、複数のインスタンスを同時に使用することはできません。だから、私はこのアプローチを完全に却下するでしょう。

それ以外は、コンポーネントの状態を変更する機能を提供することは、Reactが達成しようとしていることとまったく逆です。非常に基本的な考え方は、コンポーネントがいくつかのプロパティを与えられてレンダリングすることをコンポーネントが知っている必要があるということです

あなたが解決しようとしている問題は、手続き的なCanvas APIの性質にあります。あなたの目標は、宣言型（React）コードと手続き型（Canvas）コードの間の橋渡しをすることです。

まさにそれを行うライブラリがいくつかあります。 react-chartjsを試しましたか？ https://github.com/reactjs/react-chartjs

「リアクションの方法」をどのように実装すればよいかを知りたい場合は、コンポーネントが処理するプロパティを宣言し、コンポーネントのライフサイクルメソッドを使用することが重要です（たとえばcomponentWillReceivePropsなど）を使用して、プロパティが変更されたときにそれを検出し、それに応じて動作させます（キャンバスへの変更を実行します）。

希望すると便利です。がんばろう！