javascript - react ，无法将 Prop 传递到下一个级别

Question

这是我的 react 代码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 都是未定义 ？

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给了我一个错误，但我不认为这就是导致 Prop 无法传递的原因。