Question

我在VS Code中使用ES7 React/Redux/GraphQL/React-Native snippets，但不确定导出使用哪种“类型”。如果导出应该在类/功能组件声明或文件末尾。

在下面的代码中，我有2个类组件出口和3个功能组件出口。

其中哪些是推荐的？

select t1.id, formatpystring(t1.value, json_object_agg(t2.placeholder, t2.value)) as value
from table1 as t1, table2 as t2
group by t1.id, t1.value;

我的第二个问题是关于功能组件的-最好（建议）将功能组件编写为箭头函数或经典函数声明？

非常感谢！

Answer 1

丹·阿布拉莫夫（Dan Abramov）在他的tweet中说：

JS技巧：无论您偏爱哪种导出样式（默认或命名），还是您使用哪种函数样式（箭头或声明），请确保您的函数有名字！对于React组件尤其重要显示在DevTools中的名称和警告。

而且，在使用rce和rcc导出类组件之间：由您决定，但是，正如CRA文档中使用的rce一样：

import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file

class DangerButton extends Component {
  render() {
    return <Button color="red" />;
  }
}

export default DangerButton;

使用这种样式，您可以轻松使用HOCs，对于本示例，我们希望将类组件扭曲为库提供的高阶组件：

import { injectIntl} from "react-intl";

class Button extends React.Component {
  render() {
    const intl = this.props.intl;
    const title = intl.formatMessage({
        id: "button.title",
        defaultMessage: "Hello!"
      });
    return <Button title={title}>...</Button>;
  }
}
export default injectIntl(Button);

在使用功能组件与类组件之间：请参阅documentation，功能组件更易于编写和测试，现在有了React的useState钩子，您可以在功能组件中使用状态组件。有关类组件，请阅读React.Component文档。

Answer 2

如果要在文件中导出多个组件，则仅需使用export ComponentName（无默认值）。

然后您可以导入为

import {ComponentA,ComponentB,...} from '../directory'

另一种情况是，您只能将文件中的一个组件导出为

export default Class extends ........{} //

或

export default Class; // at the end of file

两者都一样。

您可以使用任何名称导入

import Class from '../directory'

在React中导出功能和类组件

2 个答案: