Javascript 如何将其作为类组件编写

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

从“React”导入React
从“react router dom”导入{Route，Redirect}；
从“../\u helpers/auth”导入身份验证
const privaterout=（{component:component，…rest}）=>{
返回(
{
如果（身份验证已验证）{
返回
}否则{
返回
}
}}
/>
);
}

您可以通过执行以下操作将

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
              }
            }} />
        }
      }}
      />
    );
  }
}

类PrivateRoute扩展了React.Component{
render（）{
const{component:component，…rest}=this.props；
返回(
{
如果（身份验证已验证）{
返回
}否则{
返回
}
}}
/>
);
}
}

您可以通过执行以下操作将

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
              }
            }} />
        }
      }}
      />
    );
  }
}

类PrivateRoute扩展了React.Component{
render（）{
const{component:component，…rest}=this.props；
返回(
{
如果（身份验证已验证）{
返回
}否则{
返回
}
}}
/>
);
}
}

我可以看出，etarhan已经提供了正确的答案，但我只想提及一些关于使代码更干净，从而更易于维护和可读的内容。请，我强烈建议你把你的逻辑分开

我看到你在上面写道：

我迷失在参数中

我并不感到惊讶。我也迷路了！我建议将逻辑进一步分离。另外，您不需要和

else

语句返回，就好像它不是第一个

if

it必须是else一样，因此我们可以只返回

else

块中的内容。这就是我分离代码的方法

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

import auth from '../_helpers/auth';

class PrivateRoute extends React.Component {
  getComponent = () => {
    const { component: Component, location } = this.props;

    if (auth.isAuthenticated) {
      return (
        <Component {...this.props} />
      );
    }

    return (
      <Redirect
        to={{
          pathname: '/public',
          state: {
            from: location,
          },
        }}
      />
    );
  }

  render() {
    const { ...rest } = this.props;

    return (
      <Route {...rest} render={this.getComponent()} />
    );
  }
}

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从“../\u helpers/auth”导入身份验证；
类PrivateRoute扩展了React.Component{
getComponent=（）=>{
const{component:component，location}=this.props；
如果（身份验证已验证）{
返回(
);
}
返回(
);
}
render（）{
const{…rest}=this.props；
返回(
);
}
}

正如Robert C.Martin在他的书《干净的代码：敏捷软件工艺手册》（强烈推荐）中所说的那样

“干净的代码是已经处理过的代码。有人已经处理了 是时候保持简单有序了。他们付出了适当的代价 注意细节，他们很关心。”

---

我可以看出etarhan已经提供了正确的答案，但我只想提及一些关于使代码更干净，从而更易于维护和可读的内容。请，我强烈建议你把你的逻辑分开

我看到你在上面写道：

我迷失在参数中

我并不感到惊讶。我也迷路了！我建议将逻辑进一步分离。另外，您不需要和

else

语句返回，就好像它不是第一个

if

it必须是else一样，因此我们可以只返回

else

块中的内容。这就是我分离代码的方法

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

import auth from '../_helpers/auth';

class PrivateRoute extends React.Component {
  getComponent = () => {
    const { component: Component, location } = this.props;

    if (auth.isAuthenticated) {
      return (
        <Component {...this.props} />
      );
    }

    return (
      <Redirect
        to={{
          pathname: '/public',
          state: {
            from: location,
          },
        }}
      />
    );
  }

  render() {
    const { ...rest } = this.props;

    return (
      <Route {...rest} render={this.getComponent()} />
    );
  }
}

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从“../\u helpers/auth”导入身份验证；
类PrivateRoute扩展了React.Component{
getComponent=（）=>{
const{component:component，location}=this.props；
如果（身份验证已验证）{
返回(
);
}
返回(
);
}
render（）{
const{…rest}=this.props；
返回(
);
}
}

正如Robert C.Martin在他的书《干净的代码：敏捷软件工艺手册》（强烈推荐）中所说的那样

“干净的代码是已经处理过的代码。有人已经处理了 是时候保持简单有序了。他们付出了适当的代价 注意细节，他们很关心。”

---

参数只是

道具

，您只是在销毁组件并重命名它。为什么希望它是类组件？另外，

这个.props.location

部分似乎不正确，我没有。只是尝试学习其中一种方法。参数只是

道具

，您只是在破坏组件并重命名它。为什么您希望它是类组件？另外，

这个.props.location

部分似乎不正确，我没有。只是试着从两种方式中学习。