Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将功能组件移植到基于类的组件_Javascript_Reactjs - Fatal编程技术网

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

Javascript 将功能组件移植到基于类的组件,javascript,reactjs,Javascript,Reactjs,我需要将这个基于函数的组件转换为基于类的组件,并创建一个PrivateAuth组件。 下面是PrivateAuth功能组件 function PrivateRoute({ component: Component, ...rest }) { return ( <Route {...rest} render={props => fakeAuth.isAuthenticated ? ( <Component {

我需要将这个基于函数的组件转换为基于类的组件,并创建一个PrivateAuth组件。 下面是PrivateAuth功能组件

function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        fakeAuth.isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}
函数PrivateRoute({component:component,…rest}){
返回(
伪造的。是否已验证(
) : (
)
}
/>
);
}
这是我尝试过的基于类的组件

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 }
                  }}
                />
              )
            }
          />
        );
    }
}
类PrivateRoute扩展了React.Component{
render(){
console.log('this.props',this.props);
const{component:component,…rest}=this.props;
返回(
伪造的。是否已验证(
) : (
)
}
/>
);
}
}
我发现了错误 超过最大更新深度

//不要在这里传播rest
  // 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} />
const{component:component,rest}=this.props; 伪造的。是否已验证?(
//不要将其余部分分散在这里
const{component:component,rest}=this.props;
伪造的。是否已验证(

您没有像在函数组件中那样在
路径上传播rest:
{…rest}
。否则它们看起来是一样的。您确定函数组件版本有效吗?有什么问题吗?我刚刚尝试了您提供的解决方案,它有效。别忘了分配
{…rest}
也一样。这可能是您的任何组件中的问题,或者只是您声明路由器的方式有问题。如果错误来自另一个组件,您是否可以检查错误?您没有像在函数组件中那样在
路由上传播rest:
{…rest}
。否则它们看起来是一样的。你确定函数组件版本有效吗?有什么问题吗?我刚刚尝试了你提供的解决方案,它有效。别忘了分配
{…rest}
也一样。这可能是您的任何组件中的问题,或者仅仅是您声明路由器的方式有问题。您是否可以检查错误是否来自另一个组件?我认为OP仍然希望
…rest
将除
组件
之外的所有内容都分解为一个对象。我认为OP仍然希望
…rest
将除
组件
以外的所有内容描述为对象。