Question

我想从＆＃34; main.js＆＃34;传递this.state。（父组件）进入＆＃34; bar.js＆＃34; （儿童部分）。

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

Answer 1

根据您传递道具的方式，道具的结构不符合您的预期。

尝试更改道具的结构，如下所示：

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

基本上它正在做的是将带有标签键的对象传递给你的子组件。外括号意味着它们内部的所有内容都将被评估为JavaScript。所以我们放了更多的括号来表示我们正在传递一个物体。

现在，在您的嵌套组件上，您应该可以访问this.props的以下结构：

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

但是，因为您的父状态的结构与此chartist图形所需的结构完全相同（带有标签数组和系列数组），如果您想直接传递chartist的数据对象，请执行以下操作：

<BarChart data={this.state} />

您可以像这样呈现图表：

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

reactjs无法将this.props传递给react-chartist

1 个答案: