反應，不能通過道具一個新的水平

Question

這是我反應過來的代碼Home組件

import React, { Component, PropTypes } from 'react'; 
import Header from '../components/Header' 

class Home extends Component { 
    constructor(props){ 
    super(props); 
    } 
    render() { 
    return (
    <div className='container'> 
     <Header authenticated={true} email='test@a.com'/> 
     </div> 
    ); 
    } 
} 

export default Header; 

這是我header組件

import React, { Component, PropTypes } from 'react'; 

class Header extends Component { 
    constructor(props){ 
    super(props); 
    } 

    signOut =() => { 

    } 

    get combination() { 
    debugger 
    if(this.props.authenticated){ 
     return (<ul className='nav nav-pills pull-right'> 
       <li role='presentation' >Welcome {this.props.email} </li> 
       <li role='presentation'><a onClick={this.signOut} >Sign out</a></li> 
      </ul>); 
    }else{ 
     return(
      <ul className='nav nav-pills pull-right'> 
       <li role='presentation' className='active' ><a href='/sign_up'>Sign up</a></li> 
       <li role='presentation'><a href='/sign_in' >Sign In</a></li> 
      </ul> 
    ); 
    } 
    } 

    render() { 
    return (
     <div className="header clearfix"> 
      <nav> 
      { this.combination} 
      </nav> 
     </div> 
    ); 
    } 
} 

export default Header; 

怎麼進來Header組件都this.props.authenticated和this.props.email是undefined？

Answer 1

它看起來像您在'Home'組件中導出默認'Header'而不是'Home'。當我導出'Home'時，我得到它的工作（檢查底線）。

import React, { Component, PropTypes } from 'react'; 
import Header from '../components/Header' 

class Home extends Component { 
    constructor(props){ 
    super(props); 
    } 
    render() { 
    return (
    <div className='container'> 
     <Header authenticated={true} email='test@a.com'/> 
     </div> 
    ); 
    } 
} 

export default Home; 

而且 - 我刪除了空signOut功能...我的WebPack是給我一個錯誤，但我不認爲這是什麼造成的道具得不到流傳下來。