1

我正在使用 react + redux 开发一个应用程序来了解它，我怀疑以下情况的最佳解决方案是什么：

我有一个渲染 svg rect 的组件 Rectangle 和一个 RectangleControlPoints 子级。

 render(){
    return  <g>
                <rect x={this.props.x}
                    y={this.props.y}
                    width={this.props.width}
                    height={this.props.height}
                    className="cd-attribute-container"
                    onClick={this.props.onClick}
                    >
                </rect>
                <RectangleControlPoints rect_x={this.props.x}
                    rect_y={this.props.y}
                    rect_width={this.props.width}
                    rect_height={this.props.height}>
                </RectangleControlPoints>
             </g>}

如您所见，RectangleControlPoints 在道具上接收一些矩形坐标作为道具，进行一些计算，然后在矩形周围渲染一些点，使其能够调整大小。

计算和渲染点的矩形

计算和渲染点的矩形图片

当我使用 Redux 时，矩形的所有坐标都在 redux 存储中（不存储点坐标，我使用 memoization）。而当我拖动点时，存储中的矩形属性会发生变化，从而导致矩形的重新渲染，这很好，很棒。

现在我的应用程序正在增长，我意识到我将有许多不同类的案例，它们只会使用类 RectangleControlPoints 来呈现点以调整它的大小。但是每个人都会在商店里使用不同的地方。

我的第一个想法是创建一个 HOC 来包装 RectangleControlPoints 并使其存储连接灵活。它看起来像这样

export default ClassRectangleHOC( RectangleControlPoints );


export default OtherClassRectangleHOC( RectangleControlPoints );

乍一看，我认为它会起作用，HOC 将保存存储连接逻辑，而 EectangleControlPoints 将是可重用的。但是要调整三角形的大小，我需要访问Wrapped RectangleControlPoints 类中点的状态。我不知道这是否可能，但我认为如果是，那将是一种丑陋的方法。我确信有更好的方法来实现它。

简而言之，我想用不同的商店连接重用相同的元素。我认为 HOC 是一种很好的方法，但不知道最好的方法。

我希望我的解释很清楚。

4

0 回答 0