我正在尝试创建一个可重复使用的图表组件，但我无法将其包裹起来。
我的想法是使用react（让我们称之为“Axes”）重用以下SVG，以及一些功能和状态，如宽度和高度，数据→坐标映射等等：
<svg width={...} height={...}>
<g ref="area" transform={...}>
{chartElements}
</g>
<g ref="xAxis">...</g>
<g ref="yAxis">...</g>
</svg>
然后我将这个SVG和状态用于多个图表组件。
这样做的方法可能是
将Axes设为一个组件，使用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传递，然后在渲染时传递状态/ props？这甚至可能吗？
???
我只是不知道如何处理这个问题。