reactjs - React 类定义与导出默认值

Question

我是 React 新手，正在关注 https://serverless-stack.com/ .

从一开始，组件就定义为:

class ComponentName extends React.Component {
...
}

当我到达this step时，在 AppliedRoutes 部分:

export default ({ component: C, props: cProps, ...rest }) =>
  <Route {...rest} render={props => <C {...props} {...cProps} />} />;

说这是一个名为AppliedRoute的新组件，由Parent传递它是否正确:

1. 组件(组件:C)
2. Prop ( Prop :cProps)
3. 其余父 props (...props)

我如何在第一个示例中的 class ComponentName extends React.Component 定义中从概念上思考这个问题？

Answer 1

您在这里处理两个不同的问题。让我们把你的组件变成一个变量

下面是分配给 MyRoute 变量的相同函数。它是一个无状态或“功能”组件。它是最简单的 React 组件类型，因为它只是一个函数。

const MyRoute = ({ component: C, props: cProps, ...rest }) =>
    <Route {...rest} render={props => <C {...props} {...cProps} />} />;

现在，下面又是相同的组件，但作为一个类。它可以有附加函数、构造函数，并且可以包含状态 (this.setState())。我强调，这在功能上与上面的等效，但它可以包含状态。

class MyRoute extends React.Component {
    render() {
        const { component: C, props: cProps, ...rest } = this.props;
        return (
            <Route {...rest} render={props => <C {...props} {...cProps} />} />
        );
    }
}

现在，对于您有关导出的问题，您可以通过几种不同的方式导出其中任何一个

export { MyRoute }; // access at 'exports.MyRoute'

export default MyRoute; // access at 'exports.default'

export = MyRoute; // access at 'exports'

这些都是通过导出对象公开类/变量的不同方法。导出什么并不重要，它可以是任何东西。这也会影响您导入类的方式。

您在问题中发布它的方式只是使用函数组件并将其导出为默认组件的简写。