连接到组件答案

【问题标题】：Hooking into component连接到组件
【发布时间】：2015-01-25 09:50:18
【问题描述】：

我正在尝试创建一个图表可重用组件，但我无法围绕它进行思考。

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

<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 的 props 和 state，而我们在渲染过程中无法通过这种方式获得。
将功能包装在一个mixin中，并将render方法更改为mixin的wrapAxes(chartElements)方法，返回上面的sn-p。

这会混合轴和图表的状态，需要特别注意，因为每个图表都需要在其返回值上调用 wrapAxes
将组件作为道具传递，然后在渲染时传递状态/道具？这甚至可能吗？
???

我只是不知道如何处理。

【问题讨论】：

数据源是什么样的？是设置一次吗？什么时候定的？数据是否随时间变化？
数据是图表的道具：见代码中的this.props.data
我没有看到轴与您需要的内容之间的父子关系。可能更容易使轴成为具有 renderAxes 函数的 mixin 以及您想要的其他函数。并在数据组件中根据需要使用参数调用 this.renderAxes()。
请给我们一个SVG的具体例子，以帮助我们更好地理解问题的上下文。

标签： javascript reactjs reusability

【解决方案1】：

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

【讨论】：