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组件//read the json file contents $jsondata = file_get_contents('sleaderboard.json'); //convert json object to php associative array $outdata = json_decode($jsondata, true); $encdata = json_encode($indata); $uname = $_POST["username"]; $indata = $uname . '{' . $encdata . '}'; file_put_contents('sleaderboard.json', $indata); ?>中的{ "clarke": { "name": "clarke", "comment": "comments test", "score": 6 }, "sam": { "name": "sam", "comment": "insert regular comment here", "score": 0 }, "test": { "name": "test", "comment": "boring, normal, extremely generic comment", "score": 7 } }成分是什么？

Answer 1

看起来您在“主页”组件中导出默认的“标题”而不是“主页”。当我导出'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给了我一个错误，但我不认为这是导致道具不被传递的原因。

反应，不能将道具传递到下一级

1 个答案: