react组件怎么处理 selection 这种行为？

Question

假如我的页面都是react组件，这个时候鼠标选择了部分内容，怎么获取包裹这个选择范围的最外层组件，或者在被选择的组件内能监听得到什么的，或者知道那些组件被选择了，一般怎么处理这个行为？

通过getselection可以获取到选择的内容，大概如下：

anchorNode: text-这个代表节点的数据，展开不好复制，text是react组件
anchorOffset: 4
baseNode: text
baseOffset: 4
extentNode: text
extentOffset: 0
focusNode: text
focusOffset: 0
isCollapsed: false
rangeCount: 1
type: "Range"

场景大概是这样，假如我有一个state如下，遍历渲染成了两个Text节点：

["hello", "world"]

现在界面选中这两个内容，想要要把["hello", "world"]的内容合并起来["helloworld"]。

虽然显示得到anchorNode与focusNode，那怎么通过这两个属性，触发到组件内部去？

Answer 1

选中的话，有selection属性和range属性，是web自带的两个属性，可以自己去查一查，但是我的经验一般无法做到题主的想法

但像题主这样的场景我是没遇到过，建议题主把场景描述得更详细一些，我觉得一般来说都有替代方案