reactjs kann this.props nicht in react-chartist übergeben

Question

Ich würde gerne this.state von "main.js" (übergeordnete Komponente) in "bar.js" (untergeordnete Komponente) übergeben.

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

Hier ist mein Kind Komponente:

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

Außerdem ist ich immer noch ein wenig verwirrt, wenn ich zwischen this.state vs this.props verwenden sollte. Betrete ich dieses Szenario in diesem Szenario mit this.props?

Answer 1

Ihre Requisiten sind nicht so strukturiert, wie Sie es erwartet haben, je nachdem, wie Sie sie weitergegeben haben.

Versuchen Sie, die Struktur Ihrer Requisiten zu ändern wie folgt aussehen:

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

im Wesentlichen, was diese mit den Tasten von Etiketten ein Objekt ist vorbei nach unten tut, und Serie zu Ihrem Kind Komponente. Die äußeren Klammern bedeuten, dass alles in ihnen als JavaScript ausgewertet wird. Wir setzen also mehr Klammern, um anzuzeigen, dass wir ein Objekt übergeben.

Jetzt auf Ihrem verschachtelte Komponente sollten Sie den Zugriff auf die folgende Struktur für this.props haben:

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

Da jedoch Ihre Eltern Zustand genau strukturiert ist, wie Sie für dieses chartist Graph müssen (mit einem Etiketten-Array und eine Reihe Array), wenn Sie das Datenobjekt für chartist zu überliefern wollen direkt dies nur tun:

<BarChart data={this.state} /> 

und Sie können Ihr Diagramm machen wie so:

 <ChartistGraph 
      data={this.props} 
      options={option} 
      type={'Bar'} />