Question

我通过互联网找到了这个功能组件示例。如何将其编写为类组件。我迷失了参数。

import React from 'react'
import { Route, Redirect } from 'react-router-dom';
import auth from '../_helpers/auth'


const PrivateRoute = ({ component: Component, ...rest }) => {

    return (
        <Route {...rest} render={props => {

            if (auth.isAuthenticated) {
                return <Component {...props} />
            } else {
                return <Redirect to={
                    {
                        pathname: '/public',
                        state:
                        {
                            from: this.props.location
                        }
                    }} />
            }
        }}
        />
    );
}

Answer 1

您可以通过执行以下操作将PrivateRoute功能组件重写为一个类：

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

        if (auth.isAuthenticated) {
          return <Component {...props} />
        } else {
          return <Redirect to={
            {
              pathname: '/public',
              state:
              {
                from: props.location
              }
            }} />
        }
      }}
      />
    );
  }
}

Answer 2

我可以看到etarhan已经提供了正确的答案，但是我只想提及一些有关使您的代码更整洁，从而更易于维护和可读性的内容。请，我强烈建议您分开自己的逻辑。

我看到你在上面写过：

我迷失了参数。

我并不感到惊讶。我也迷路了！我建议再将逻辑分开。另外，您也不需要返回else语句，就好像它不是第一个if，它必须是其他语句一样，因此我们只需返回{{1} }块。所以这就是我分离代码的方式。

else

罗伯特·C·马丁（Robert C. Martin）在他的《清洁代码：敏捷软件工艺手册》（强烈推荐）中指出。

“清洁代码是已处理的代码。有人采取了是时候让它保持简单有序了。他们已经支付适当注意详情。他们很在意。”

如何将其编写为类组件

2 个答案: