如何通過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/