React 类定义与导出默认值答案

【问题标题】：React Class definition vs export defaultReact 类定义与导出默认值
【发布时间】：2018-04-14 15:54:40
【问题描述】：

我是 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 定义中从概念上考虑这个问题？

【问题讨论】：

标签： reactjs jsx

【解决方案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'

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

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

【讨论】：

感谢您的回答！另一个问题，对于内部的渲染函数，说渲染是一个接受'props'并返回使用'props'和'cProps'的组件是否正确？如果是这样，调用 MyRoute 时“props”的“输入”在哪里？
Route 中的渲染函数传递路由道具，例如location、match 和history。它由反应路由器提供
所以我正在重温这个@caesay。在 ES6 Class 定义中，的render函数中怎么能访问C，而它的“key”是component
两年后看到这个，@caesay 非常感谢你回答我的问题！

【解决方案2】：

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

class AppliedRoutes extends React.Component {
  render() {
    const { component: C, props: cProps, ...rest } = this.props

    return (
      <Route
        {...rest}
        render={props => <C {...props} {...cProps} />}
      />
    )
  }
}

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

在这种情况下，component、props 和 rest 都是 AppliedRoutes 属性的一部分。如果您的组件不处理状态或生命周期事件，只是传播 props 并立即返回一个新组件，请坚持第二种方法。

【讨论】：