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

非常基本。 OK？

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

Answer 1

<Doughnut labels={data.labels} />

Answer 2

您可以将父组件中所谓的道具（Docs here）发送到子组件。

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

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

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

在组件之间反应共享信息

2 个答案: