首页 文章

挂钩组件

提问于
浏览
5

我正在尝试创建一个图表可重用组件,但我无法围绕它进行包装 .

我们的想法是使用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 回答

  • 0

    我正在使用d3和React来做这件事,但this code可能会回答你的问题

相关问题