如何在ES6 React中使用enhanceWithClickOutside包装类组件？

嘿，这事儿其实很简单，和你原来的写法逻辑完全一致，只需要把你的ES6类组件传给enhanceWithClickOutside这个高阶组件，再导出包装后的结果就行。

完整转换代码示例 #

import React from 'react';
import { enhanceWithClickOutside } from 'react-click-outside';

class Dropdown extends React.Component {
  render() {
    return 'something';
  }

  // 必须定义这个方法，react-click-outside会调用它处理外部点击事件
  handleClickOutside = () => {
    // 这里写你点击外部时要执行的逻辑，比如关闭下拉菜单
    // 示例: this.setState({ isOpen: false });
  }
}

// 用高阶组件包装Dropdown后导出
export default enhanceWithClickOutside(Dropdown);

关键说明 #

• enhanceWithClickOutside是一个高阶组件(HOC)，作用就是给你的组件添加点击外部区域的监听能力，用法和你之前用module.exports导出包装组件的逻辑完全对应，只是换成了ES6的export语法。
• 一定要记得在组件类里定义handleClickOutside方法，这是react-click-outside包要求的回调函数——当用户点击组件外部时，这个方法会被自动触发，你可以在里面实现关闭下拉菜单这类核心逻辑。

内容的提问来源于stack exchange，提问作者user9728810