我正在尝试创建一个图表可重用组件,但我无法围绕它进行包装 .
我们的想法是使用react(让我们称之为“Axes”)重用以下SVG,以及一些功能和状态,如宽度和高度,数据→坐标映射等等:
<svg width={...} height={...}>
<g ref="area" transform={...}>
{chartElements}
</g>
<g ref="xAxis">...</g>
<g ref="yAxis">...</g>
</svg>
然后我将这个SVG和状态用于多个图表组件 .
这样做的方法可能是
- 使Axe成为一个组件,使用
this.props.children
而不是chartElements
,并定义一个Chart组件,如下所示:
render: function() {
return (
<Axes ref="axes" {...this.props}>
{this.props.data.map(function(d) {
return <rect x={this.refs.axes.state.xMap(d)} />
})}
</Axes>
)
}
但这需要访问Axes的道具和状态,在渲染过程中我们不能这样做 .
- 将功能包装在mixin中,并将render方法更改为mixin的
wrapAxes(chartElements)
方法,该方法返回上面的代码段 .
这将混合Axes和图表的状态,需要特别注意,因为每个图表需要在其返回值上调用wrapAxes
-
传递组件作为prop,然后在渲染时传递状态/道具?这有可能吗?
-
???
我只是不知道如何处理这个问题 .
1 回答
我正在使用d3和React来做这件事,但this code可能会回答你的问题