Javascript 钩住部件

我正试图创建一个图表可重用组件，但我无法将我的大脑围绕它

其思想是使用react（让我们称之为“轴”）重用以下SVG，以及一些功能和状态，如宽度和高度、数据→坐标映射等：

<svg width={...} height={...}>
    <g ref="area" transform={...}>
        {chartElements}
    </g>
    <g ref="xAxis">...</g>
    <g ref="yAxis">...</g>
</svg>

但这需要访问Axis的道具和状态，而在渲染过程中我们无法通过这种方式获得这些道具和状态

将功能包装到mixin中，并将render方法更改为mixin的

wrapAxes（chartmelements）

方法，该方法返回上述代码片段

这将混合轴和图表的状态，需要特别注意，因为每个图表都需要在其返回值上调用wrappaxes

将组件作为道具传递，然后在渲染时传递状态/道具？这可能吗

---

我只是不知道如何处理这个问题。

我正在使用d3和React来处理这个问题，但可能会回答您的问题

数据源是什么样子的？是一次设置吗？什么时候定？数据是否随时间变化？数据是图表的一个道具：请参见代码中的

this.props.data

。我看不到轴与所需内容之间存在父子关系。使用renderAxes函数和其他您想要的功能，使轴成为mixin可能更容易。在数据组件中，根据需要使用参数调用此.renderAxes（）。请给我们一个SVG的具体示例，以帮助我们更好地理解问题的上下文。

render: function() {
    return (
        <Axes ref="axes" {...this.props}>
        {this.props.data.map(function(d) {
            return <rect x={this.refs.axes.state.xMap(d)} />
        })}
        </Axes>
    )
}