2017-04-18 52 views
9

Yönlendiriciyi kullanarak bileşenlere sahne almam gerekiyor. Gördüğünüz gibi, ben bileşeni Giriş iletmek istediğiniz pervane IsAuthenticatedTepki-yönlendirici-dom tepkime aksesuarını komponente geçirme

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import AppBarTop from './appbar/AppBarTop'; 

import Login from '../pages/login/Login'; 
import {BrowserRouter as Router, Route} from 'react-router-dom'; 


class App extends Component { 

    render() { 

     const { isAuthenticated } = this.props; 

     return (
      <Router> 
       <div> 
        <AppBarTop isAuthenticated={isAuthenticated} /> 
        <div className="content"> 
         <Route path="/login" isAuthenticated={isAuthenticated} component={Login} /> 
        </div> 
       </div> 
      </Router> 
     ); 
    } 
} 

: İşte benim kod. i sahne oturum açtığınızda

class Login extends Component { 

    constructor(props) { 
     super(props); 
     console.log(props); 
    } 

    render() { 
     return (
      <LoginForm /> 
     ); 
    } 

} 

export default connect(null) (Login); 

prop yoktur IsAuthenticated. Ne yapıyorum yanlış? Pervaneyi nasıl doğru şekilde iletebilirim? Dokümanları ve diğer tartışmaları takip ettim. Anlayışımdan işe yaramalı.

<Route 
    path="/login" 
    render={(props) => <Login {...props} isAuthenticated={isAuthenticated}/>} 
/> 

O Girişi Bileşen this.props.isAuthenticated tarafından bulunmalıdır: sürümü tepki-yönlendirici ve tepki-yönlendirici-dom böyle 4.0.0

cevap

26

Geçiş kadar. {...props} ait

Sebep: biz sadece isAuthenticated bileşeni Giriş geçirilen alacak o zaman bu koymazsanız

, yönlendirici bileşenine geçer, diğer tüm değerler, mevcut iç Giriş bileşeni olmayacaktır. {...props} yazdığımızda, tüm değerleri bir ekstra değerle geçiriyoruz.

Ve component yönlendirici yerine render yöntemini kullanın. Eğer bileşenini kullandığınızda (yerine işlemek veya çocukları, aşağıda) yönlendirici verilen yeni Tepki elemanı oluşturmak için React.createElement kullanır

:

olarak DOC başına:

Component bileşen. Bu, bileşen özniteliğine satır içi bir işlev sağlıyorsanız, her oluşturma işleminde yeni bir bileşen oluşturacağınız anlamına gelir. Bu, mevcut bileşenin kaldırılmasını ve mevcut bileşenin güncellenmesi yerine yeni bileşen montajı ile sonuçlanır. Satır içi oluşturma için satır içi işlevi kullanırken, oluşturmayı kullanın.

Render

:

Bu istenmeyen yeniden montaj olmadan rahat inline render ve sarma sağlar

.