反应组件作为道具

Question

我试图将一个组件作为 prop 传递以创建经过身份验证的路由，但在工作过程中，我尝试在文档中搜索如何执行此操作或在网络中搜索，但不幸的是我没有找到。所以这是我的组件

 import { useSelector } from "react-redux"
 import { Redirect, Route as ReactRoute } from "react-router-dom/cjs/react-router-dom.min"
export const Route = ({isPrivate=false, Component, ...rest}) =>{
    const { acessToken } = useSelector(store=>store)
    return(
        <ReactRoute  {...rest} render={()=> isPrivate === !!acessToken ? <Component/> : <Redirect to={isPrivate ? '/' : '/dashboard'}/>} />
    )
}

任何人都可以给我一些提示吗？

Answer 1

当你想将组件作为 prop 传递时，你可以使用下面的方法

export const Route = (Component) => {
  return (props) => {
    return <Component {...props} {...resourceProps} />;
  };
};

Answer 2

我明白你想要达到的目标。

function PrivateRoute ({isPrivate=false, component: Component, ...rest}) {
  const { acessToken } = useSelector(store=>store)
  return (
    <Route
      {...rest}
      render={(props) => isPrivate === !!acessToken 
        ? <Component {...props} />
        : <Redirect to={isPrivate ? '/' : '/dashboard'}/>}
    />
  )
}

这是一个很好的例子：

反应组件作为道具

React Component as a prop

reactjs

react-redux

react-router-dom

react-props