javascript - 连接到组件

Question

我正在尝试创建一个图表可重用组件，但我无法全神贯注。

想法是使用 React 重用以下 SVG(我们称之为“轴”)，以及一些功能和状态，如宽度和高度、数据→坐标映射等:

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

然后我会将这个 SVG 和状态用于多个图表组件。

可能的方法是

1. 使 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 的属性和状态，而我们在渲染过程中无法通过这种方式获得。

2. 将功能包装在混合中，并将渲染方法更改为混合的 wrapAxes(chartElements) 方法，该方法返回上述代码段。

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

3. 将组件作为 prop 传递，然后在渲染时传递状态/props？这可能吗？

4. ???

我只是不知道该如何处理。

Answer 1

我正在使用 d3 和 React 来执行此操作，但是 this code可能会回答你的问题