Reactjs 反应：在直接子代上定义ref prop？

我想创建一个包装器组件来处理组件的外部点击

有两件事我正试图避免，这可能是不可能的

• 避免创建几乎冗余的
  来处理my
  组件的

  ref

• 避免每次包装组件时都必须处理

  this.props.passedRef

我能得到的最干净的实现是使用HOC，如下所示。您将看到，我还尝试使用

React.cloneElement（）

，但如果注释掉，我就离开了

const onOutsideClick=（组件）=>{
类OnOutsideClick扩展了React.PureComponent{
capturedEvents=['touchend'，'click']；
componentDidMount（）{
this.capturedvents.forEach（（事件）=>{
document.addEventListener（事件，this.handleOutsideClick，true）；
});
}
组件将卸载（）{
this.capturedvents.forEach（（事件）=>{
document.removeEventListener（事件，this.handleOutsideClick，true）；
});
}
把手外侧点击=（e）=>{
如果（！this.wrapperRef.包含（e.target））{
log（'handled out Click'）；
}
}
setWrapperRef=（节点）=>{
this.wrapperRef=节点；
}
//render（）{
//返回React.cloneElement（this.props.children{
//ref:this.setWrapperRef，
//   });
// }
render（）{
回来
}
}
返回OnOutsideClick；
};

单击时会出现以下错误：

\u This.wrapperRef.contains不是HTMLDocument.OnOutsideClick上的函数。\u This.handleOutsideClick

如果将渲染方法更改为：

render（）{
回来
}

在子体组件渲染方法中，我必须定义：

<div ref={this.props.forwardRef}>
    ...
</div>

...

---

这感觉就像我在玷污一个后代。仅仅因为它是子体，就可以将ref传递给子体吗？

有多种方法来处理它

首先：按照您的建议，您可以将ref作为具有不同名称的道具传递，然后将其附加到elements div

Second:您可以使用

forwardRef

api将ref转发到如下组件

const MyComponent = React.forwardRef((props, ref) => (
    <div ref={ref}>{/* content here */}</div>
));

---

谢谢，第三个选项是否可能要求

组件具有包装div，或者是刚刚由HOC包装器在

组件上定义的
ref={…}
？第三个选项不要求您对呈现元素的方式进行任何更改。你不需要包装袋
handleOutsideClick = (e) => {
  if (!ReactDOM.findDOMNode(this.wrapperRef).contains(e.target)) {
    console.log('handled Outside Click');
  }
}