我正在使用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) )
这感觉就像一个反模式,因为反应完全是关于组合和单向数据流。这样做的正确方法是什么?
答案 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} />