反应组件功能

Question

我在这里找到了一个不错的可拖动svg组件：

https://gist.github.com/hashrock/0e8f10d9a233127c5e33b09ca6883ff4

它基本上是一个Circle组件，可以拖动。

但是，我想添加更多元素，不仅是圆形（例如，我还希望添加矩形和可以插入的通用SVG）

怎么办？ 我想到了通用HOC，说“可拖动”，里面应该是move函数， 但是我会在render()部分写什么？

Answer 1

您可以使用渲染道具。将Circle组件转换为Draggable组件，并进行如下渲染：

Draggable.js

return (
  {this.props.render({
      cx:{position.x},
      cy:{position.y},
      onPointerDown:{handlePointerDown},
      onPointerUp:{handlePointerUp},
      onPointerMove:{handlePointerMove},
      active:{position.active}
  })}
);

然后，您可以创建具有不同渲染功能的Draggables对象：

App.js

function App() {
  return (
    <svg viewBox="0 0 400 400" width="400" height="400">
      <Draggable render={renderCircle} />
      <Draggable render={renderRect} />
    </svg>
  );

}