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);

我正在尝试在同一文件中添加第二个组件。由于某些原因，我希望将其保存在同一文件中*。我以几乎相同的方式定义了类MyComponent2，但是现在我不知道如何导出，因为考虑到MyComponent2也必须用{修饰{1}} HOC。

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

withStyles

^ *我知道我可以把它放在另一个文件中，但是我想知道如果有一天我有非常令人信服的理由，该怎么做。

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
     }
  });

那样，名称不会冲突，因为类是类表达式而不是类声明。

原因*

我想不到。将组件拆分为多个文件很有意义。

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
    }
});

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

3 个答案: