从父母访问子道具

Question

我正在使用react建立一个d3接口。我希望api尽可能简单，为此我已经得到了以下折线图组件。

<Chart type="line" multiseries="true">
    <Line data={[...]} label="line1" />
    <Line data={[....]} label="line2" interpolate="linear" />
</Chart>

我遇到的问题是每一行都需要一个共同的比例，为了生成，我需要找到具有最大值范围的数据集作为比例。

我以两种方式完成了这项工作。第一种方法是使用LineChart组件并将所有数据作为像这样的大对象传递

const config = { line1 : { data: [...] }, line2: { data: [...], interpolate: 'linear' } };
<LineChart config={config} />

这样可以很容易地生成行，LineChart为我们创建具有propper scale的Line组件，因为它可以立即访问所有数据。缺点是，与第一个选项相比，这感觉很麻烦，并且需要循环遍历对象以获取所有数据属性。

第二种方法是使用如上所述的api并循环遍历this.props.children以获取每个孩子的数据属性。

const children = this.props.children.isArray() ? this.props.children : [this.props.children]
const data = children.map( child => (child.data) )

这感觉就像一个反模式，因为反应完全是关于组合和单向数据流。这样做的正确方法是什么？

Answer 1

访问子组件设置的道具确实没有问题，事实上，React仅针对该用例提供了Children顶级API：

var data = React.Children.map(this.props.children, child => child.props.data);

React.Children.* apis使孩子正常化，这样您就不必担心单个孩子是否被传递或多次传播。

来自the docs：

  

<强> React.Children
  React.Children提供了处理this.props.children不透明数据结构的实用程序。

Answer 2

您的选项2是正确的选项。如果Chart需要根据一条数据计算某些东西，那么这条数据就是Chart的支柱，而不是Line的支柱。

通过将配置设置为数组而不是对象，可以使整个图表更加灵活。循环更容易，你可以拥有任意数量的行。

const config = [ 
    { data: [...] },
    { data: [...], interpolate: 'linear' },
];

<LineChart config={config} />