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