Question

我需要将此基于功能的Component转换为基于类的Component并创建一个PrivateAuth Component。这是PrivateAuth功能组件。

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

这是我尝试过的基于类的组件。

class PrivateRoute extends React.Component{
    render(){
        console.log('this.props',this.props);
         const{ component: Component, ...rest } =this.props;
        return(
            <Route
            render={props =>
              fakeAuth.isAuthenticated ? (
                <Component {...props} />
              ) : (
                <Redirect
                  to={{
                    pathname: "/login",
                    state: { from: props.location }
                  }}
                />
              )
            }
          />
        );
    }
}

我试图得到错误超过最大更新深度。

Answer 1

  // don't spread rest here
  const{ component: Component, rest } =this.props;

    <Route
        // and you can here spread rest like before
        {...rest}
        render={props =>
          fakeAuth.isAuthenticated ? (
          <Component {...props} />

将功能组件移植到基于类的组件

1 个答案: