Konvertieren Reagieren-Funktion component class component-Ausgabe

Habe ich Folgendes reagieren funktionale Komponente zur Unterstützung der Authentifizierung erforderlich, Routen mit reagieren-router.

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    isAuthenticated() ? ( 
        <Component {...props}/>
    ) : (
        <Redirect to={{
            pathname: '/login', 
            state: {from: props.location }
        }}/>
    )
  )}/>
)

Ich brauche zu konvertieren, das von einer funktionalen Komponente eine Klasse, Komponente, so kann ich die Vorteile der componentDidMount Methode zu Reagieren.Komponente. Leider ich habe Probleme, herauszufinden, wie die Migration dieser. Wenn ich nehmen Sie es wie es ist ich brauche eine Replikation der Komponenten-und ...der rest der Parameter, aber ich bin mir nicht sicher, wie das zu tun. Ich denke, ich kann die Komponenten-parameter mit diesem.Requisiten.Komponente, aber ich bin mir nicht sicher, wie Sie Sie zu ziehen ...der rest. Ich bin neu in JSX und ES6 so dass jede Hilfe oder Unterstützung würde sehr geschätzt.

  • kann man den code mit der Verwendung dieser funktionalen Komponente ?
InformationsquelleAutor Chris Dellinger | 2017-04-29
  1. 21

    Nichts ist so schwierig, wirklich. Die funktionale Komponente ist die render Funktion, also:

    class PrivateRoute extends React.Component {
    render() {
       const {component: Component, ...rest} = this.props;

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

    oder, geschrieben ein bisschen mehr lesbar:

    class PrivateRoute extends React.Component {
    render() {
       const {component: Component, ...rest} = this.props;

       const renderRoute = props => {
           if (isAuthenticated()) {
              return (
                  <Component {...props} />
              );
           }

           const to = {
               pathname: '/login', 
               state: {from: props.location}
           };

           return (
               <Redirect to={to} />
           );
       }

       return (
           <Route {...rest} render={renderRoute}/>
       );
    }
}
    • Danke. Das war hilfreich.
    • Die Sache, die ich nicht verstehe, ist const {component: Component, ...rest} = this.props;. Was bedeutet dies tun, es ist wie eine umgekehrte variable?
    • Bär: Das ist destructuring assignment
    InformationsquelleAutor Sulthan
  2. 1

    Einen schönen, sauberen umgestalten durch die Verlängerung der Route Komponente:

    class PrivateRoute extends Route {

    render() {
        return isAuthenticated()
            ? super.render()
            : <Redirect to={{
                pathname: '/login',
                state: {from: props.location}
            }}/>;
    }
}

    Wenn Sie diese haben, müssen Sie wickeln Sie Ihre <PrivateRoute/>s im <Switch/> weiter unten). Sonst haben Sie doppelte redirects und die Seite wird nicht geladen.

    <Router>
    <Navbar/>
    <SideDrawer/>
    <Switch>
        <Route              path="/tokens"   component={Login}/>
        <PrivateRoute exact path="/"         component={ExampleComponent}/>
        <PrivateRoute       path="/users"    component={Users}/>
        <PrivateRoute       path="/software" component={Software}/>
    </Switch>                   
</Router>
    InformationsquelleAutor Cameron Hudson
Schreibe einen Kommentar