如何通过ReactJS将渲染方法中的类包装到OnClickOutside中？

Question

我使用EmojiPicker和ReactJS。如果我在其外面点击，我必须关闭EmojiPicker。怎么做？我正在尝试使用onClickOutside，但我需要将EmojiPicker包装进它并添加特殊的方法，它将改变Conversation类的状态（isOpened为false）。所以首先我必须添加handleClickOutside方法到EmojiPicker，它将把Conversation的状态（isOpened）改为false。

这里是我的代码示例：

class Conversation extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      isOpened: false 
     } 
    } 
    render(){ 
     return (
      <div> 
       ...OTHER THINGS... 

       <EmojiPicker className={this.state.isOpened ? " " : "display-none"} /> 

       ...OTHER THINGS... 
      </div> 
     ) 
} 
export default OnClickOutside(EmojiPicker); 

有人可以帮我吗？

Answer 1

我发现这篇关于向组件提供动态超类的文章。它的方法可能适用于这种用例。 http://www.mikedoesweb.com/2017/dynamic-super-classes-extends-in-es6/