从父母那里访问儿童道具

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量表创建Line组件，因为它可以立即访问所有数据。不利的一面是，与第一个选项相比，这感觉很麻烦，并且需要通过对象循环以将所有数据属性删除。

第二种方法是使用上面描述的API，并通过this.props.children循环获取每个孩子的数据属性。

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

这感觉就像是一个抗模式，因为React全部涉及组成和单向数据流。正确的方法是什么？

Answer 1

访问由儿童组件设置的道具确实没有错，实际上，React提供了Children顶级API，仅适用于该用例：

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

React.Children.* apis使孩子正常化，因此您不必担心单个孩子是否通过或多个。

来自文档：

react.Children
react.Children提供了处理this.props.Children不透明数据结构的实用程序。

Answer 2

您的选项2是正确的。如果图表需要根据一块数据来计算某些内容，那么该数据是图表的道具，而不是线路的道具。

您可以通过使配置数组而不是对象使整个图表更加灵活。循环更容易，并且您可以拥有任何数量的行。

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