réagir routeur v4 avec Tapuscrit: comment utiliser le paramètre `component` comme jsx élément

Question

I cette composante qui enveloppe le composant de Routereact-router-dom:

// AuthRoute.tsx

import * as React from "react"; 
import { Redirect, Route } from "react-router-dom"; 
import { RouteProps } from "react-router"; 

interface Props extends RouteProps { 
    user: any 
} 

const AuthRoute: React.SFC<Props> = ({ user, component: Component, ...rest }) => { 
    console.log("auth route...", user); 
    return (
    <Route {...rest} render={matchedProps => (
     !user || user.expired 
     ? <Redirect to="/login"/> 
     : <Component {...matchedProps} /> <--- error here 
    )}/> 
); 
}; 

l'erreur est element type Component does not have any construct or call signatures

Comment rendre le Component? avec ou sans changement de nom de paramètre.

Answer 1

Je suppose que si vous voulez rendre le composant passé avec quelques accessoires supplémentaires que vous devez utiliser cloneElement à cet effet:

var elem = React.cloneElement(component, matchedProps); 

Donc, votre code peut ressembler à ceci:

return (
    <Route {...rest} render={matchedProps => (
     !user || user.expired 
     ? <Redirect to="/login"/> 
     : React.cloneElement(component, matchedProps) 
    )}/> 
);