反应在组件之间共享信息

Question

我有 2 个组件。

首先我要呼唤父亲

<Main>
  <ChartDoughnut />
</Main>

首先我会打电话给孩子

const data = {
    labels: [
        'Red',
        'Green'
    ],
    datasets: [{
        data: [300, 50],
        backgroundColor: [
        '#FF6384',
        '#36A2EB'
        ],
        hoverBackgroundColor: [
        '#FF6384',
        '#36A2EB'
        ]
    }]
};
class ChartDoughnut extends Component {
    render() {
        return (
                <Doughnut data={data} />
            );
        }
}

非常基本。还行？

但

我想发送一些信息，例如：标签和数据集.data;对于我的图表，从父亲到孩子，但我不知道如何让我的组件理解这些参数以填充正确的信息。

Answer 1

<Doughnut labels={data.labels} />

Answer 2

您可以将所谓的 props（此处为 Docs）从父组件发送到子组件。

<Main>
  <ChartDoughnut data={[300, 50]} backgroundColour={[
'#FF6384',
'#36A2EB'
]}>
</Main>

在孩子中，这显示为this.props因此在上面的示例中，您可以像这样使用它：

datasets: [{
  data: this.props.data,
  backgroundColor: this.props.backgroundColour,
  hoverBackgroundColor: [
    '#FF6384',
    '#36A2EB'
  ]
}]