1

this.state を「main.js」(親コンポーネント)から「bar.js」(子コンポーネント)に渡したいと思います。

//main.js

    import React, { Component } from 'react';
    import BarChart from './Bar-chart';

    class Hero extends Component {
  constructor(props) {
    super(props);
    this.state = {
      labels: ['P1', 'P2', 'P3', 'P4', 'P5/P6'],
      series: [[ 1, 2, 3, 4, 5 ]]
    }
  }

  render() {

    return (
      <div className="header">
        <div className="container">
          <div className="row">
              <BarChart data={this.props.labels, this.props.series}/>
            </div>
          </div>
        </div>
      </div>
    );
  }
};

export default Hero;

ここに私の子コンポーネントがあります:

//bar.js

import React, { Component } from 'react';
import ChartistGraph from 'react-chartist';
import Legend from 'chartist-plugin-legend';

class BarGraph extends Component {
  constructor(props) {
    super(props);

  }

  render() {
    const option = {
      height: '350px',
      plugins: [
        Legend({
          legendNames: ['P1', 'P2', 'P3', 'P4', 'P5/P6'],
        })
      ]
    };

    return (
        <ChartistGraph
          data={this.props.labels, this.props.series}
          options={option}
          type={'Bar'} />
    );
  }

  barData() {
    return ({
        labels: ['P1', 'P2', 'P3', 'P4', 'P5/P6'],
        series: [[ 8, 28, 40, 25, 9 ]]
    });
  };
}

export default BarGraph;

さらに、いつ this.state と this.props を使用する必要があるかについて、まだ少し混乱しています。このシナリオでは、this.props を使用して正しくアプローチしていますか?

4

1 に答える 1

2

あなたの小道具は、あなたがそれらをどのように伝えたかに基づいて、あなたが期待するように構造化されていません.

props の構造を次のように変更してみてください。

<BarChart data={{ labels: this.props.labels, series: this.props.series}}/>

基本的にこれが行っているのは、ラベルのキーとシリーズを持つオブジェクトを子コンポーネントに渡すことです。外側の中かっこは、その中のすべてが JavaScript として評価されることを意味します。そのため、オブジェクトを渡すことを示すために中括弧を追加します。

ネストされたコンポーネントでは、this.props の次の構造にアクセスできる必要があります。

this.props = {
   series: [],
   labels: []
}

ただし、親状態はこのチャーティスト グラフに必要な (ラベル配列とシリーズ配列を使用して) 正確に構造化されているため、チャーティストのデータ オブジェクトを直接渡したい場合は、次のようにします。

<BarChart data={this.state} />

グラフを次のようにレンダリングできます。

        <ChartistGraph
          data={this.props}
          options={option}
          type={'Bar'} />
于 2016-05-13T02:25:24.677 に答える