如何从单个ES6模块通过HOC导出多个React组件？

嘿，这个问题我之前也踩过坑！核心就是要避开变量重复定义的雷区，同时严格遵循ES模块的导出语法，下面给你两种最实用的正确实现方式：

方法一：先定义原始组件类，再装饰导出 #

这种方式逻辑最清晰，给未装饰的组件类加个独特后缀（比如Raw），避免和最终导出的组件变量名冲突：

import React, { Component } from 'react';
import withStyles from 'react-jss';

const styles = theme => ({
  root: {
    padding: theme.spacing(2),
    backgroundColor: '#fff'
  }
});

// 第一个组件：先定义类，再装饰后默认导出
class MyComponent extends Component {
  render() {
    return <div className={this.props.classes.root}>My Component</div>;
  }
};

// 第二个组件：先定义未装饰的原始类
class MyComponent2Raw extends Component {
  render() {
    return <div className={this.props.classes.root}>My Component 2</div>;
  }
};

// 导出装饰后的组件
export default withStyles(styles)(MyComponent);
export const MyComponent2 = withStyles(styles)(MyComponent2Raw);

方法二：直接在导出语句中装饰组件 #

如果不想额外定义原始类变量，可以直接在导出时创建并装饰组件，写法更简洁：

import React, { Component } from 'react';
import withStyles from 'react-jss';

const styles = theme => ({
  root: {
    padding: theme.spacing(2),
    backgroundColor: '#fff'
  }
});

// 默认导出第一个装饰后的组件
export default withStyles(styles)(class MyComponent extends Component {
  render() {
    return <div className={this.props.classes.root}>My Component</div>;
  }
});

// 命名导出第二个装饰后的组件
export const MyComponent2 = withStyles(styles)(class extends Component {
  render() {
    return <div className={this.props.classes.root}>My Component 2</div>;
  }
});

为啥你之前的写法会报错？ #

• export withStyles(styles)(MyComponent2);：缺少default或const关键字，不符合ES模块导出语法
• export const withStyles(styles)(MyComponent2);：const后面必须跟变量名，不能直接跟表达式
• export const MyComponent2 = withStyles(styles)(MyComponent2);：右边的MyComponent2还未定义就被调用，属于变量提升导致的重复定义问题

这样处理后，你就能在同一文件中同时导出两个带withStyles装饰的组件，导入时直接用import MyComponent, { MyComponent2 } from './你的文件路径'即可！

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