从父母访问子道具

时间:2017-06-07 16:40:03

标签: reactjs d3.js

我正在使用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) )

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

2 个答案:

答案 0 :(得分: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不透明数据结构的实用程序。

答案 1 :(得分:0)

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

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

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

<LineChart config={config} />