ReactJS를 통해 렌더링 메소드에서 OnClickOutside로 클래스를 래핑하는 방법은 무엇입니까?

Question

EmojiPicker를 ReactJS와 함께 사용하고 있습니다. EmojiPicker를 클릭하면 EmojiPicker를 닫아야합니다. 그것을하는 방법? onClickOutside를 사용하려고하는데 EmojiPicker를 그 안에 넣고 Conversation 클래스의 상태를 변경하는 특수 메서드를 추가해야합니다 (isOpened를 false로 설정). 그래서 먼저 대화의 상태 (isOpened)를 false로 바꿀 EmojiPicker에 handleClickOutside 메소드를 추가해야합니다.

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/