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传递它：

组件（component: C）
道具（props: cProps）
其他父道具（...props）

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

Answer 1

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

以下是分配给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'

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

{{1}}

这些只是通过exports对象公开类/变量的不同方法。无论你出口什么都没关系，它可能是任何东西。这也会影响您导入课程的方式。

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

Answer 2

第一个例子是编写React组件的标准方法。如果您想在这种情况下应用第二种方法，最终结果如下：

 android.enableAapt2=false

第二个例子是无状态或functional组件。它接受道具作为对象参数并返回一个React元素。

在这种情况下，class AppliedRoutes extends React.Component { render() { const { component: C, props: cProps, ...rest } = this.props return ( <Route {...rest} render={props => <C {...props} {...cProps} />} /> ) } }，component和props都是rest道具的一部分。如果您的组件不处理状态或生命周期事件，只需传播道具并立即返回新组件，请坚持第二种方法。

React类定义与导出默认值

2 个答案: