从单个 ES6 模块通过 HOC 导出多个组件

Question

我习惯于以类似这样的方式编写我的 React 组件：

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

const styles = theme => ({
    // my styles
});

class MyComponent extends Component {
    render() {
        // my render function
    }
};

export default withStyles(styles)(MyComponent);

我正在尝试在同一个文件中添加第二个组件。出于某些原因，我想将它放在同一个文件中*。我以几乎相同的方式定义了 class MyComponent2，但现在 我不知道应该如何导出它，考虑到 MyComponent2 必须用 withStyles HOC 装饰。

这是我尝试过的（它被标记为错误）：

export withStyles(styles)(MyComponent2); 
export const withStyles(styles)(MyComponent2); 
export const MyComponent2 = withStyles(styles)(MyComponent2); // of course I'm redefining MyComponent2

^* 我知道我可以将它放在另一个文件中，但我想知道如何做到这一点，以防有一天我有非常令人信服的理由。

Answer 1

每个文件可以有多个命名导出。

export const Component1 = withStyles(styles)(MyComponent1);
export const Component2 = withStyles(styles)(MyComponent2);

// or
export default {
    MyComponent1 : withStyles(styles)(MyComponent1),
    MyComponent2 : withStyles(styles)(MyComponent2)
}

Answer 2

我会选择：

  export const MyComponent = withStyles(class MyComponent extends Component {
     render() {
         // my render function
     }
  });

这样，名称就不会冲突，因为 class 是 class 表达式而不是 class 声明。

for reasons*

我想不出任何一个。将组件拆分成多个文件是有意义的。

Answer 3

我猜你会想要使用

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

const styles = theme => ({
    // my styles
});

export const MyComponent1 = withStyles(styles)(class extends Component {
    render() {
        // my render function
    }
});

export const MyComponent2 = withStyles(styles)(class extends Component {
    render() {
        // my render function
    }
});

从单个 ES6 模块通过 HOC 导出多个组件

Exporting multiple components through HOC from a single ES6 module

javascript

es6-modules