在React/Redux中連接頁面

Question

我在Navbar組件中有一個註銷按鈕，但我想在另一個頁面（SettingsPage組件）中獲取它。我用與Navbar相同的方式做了它，但它不起作用。顯示的SettingsPage是因爲我在App.jsx中調用它，並且註銷工作正常，但當我直接轉到頁面（SettingsPage）時，註銷不起作用。

App.jsx：

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 

//Actions 
import { attemptLogout } from '../actions/AuthActions'; 

//Components 
import Navbar from '../components/Navbar'; 
import SignUpForm from '../components/authentication/SignUpForm'; 
import LoginForm from '../components/authentication/LoginForm'; 
import LandingPage from '../components/static_pages/landing_page/LandingPage.jsx'; 
import SettingsPage from '../components/static_pages/SettingsPage' 

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

    render() { 
    // Injected by connect() call: 
    const { dispatch, userAuthSession } = this.props; 

    // Injected by React Router 
    const { location, children } = this.props; 
    /*const { pathname } = location; 

    const value = pathname.substring(1);*/ 

    var content; 
    var landingPage; //TODO move this to components/static_pages 
    var settings; 

    settings = <SettingsPage userAuthSession={userAuthSession} 
      logout={() => dispatch(attemptLogout())}/> 

    if (children === undefined){ 
     landingPage = <LandingPage />; 
    } 

    return (
     <div> 
     <Navbar userAuthSession={userAuthSession} 
       logout={() => dispatch(attemptLogout())}/> 

       { settings } 
     { landingPage } 
     { children } 
     { content } 
     </div> 
    ); 
    } 
} 

App.contextTypes = { 
    router: PropTypes.object.isRequired 
}; 

function select(state) { 
    return { 
    universalTodos: state.universalTodos, 
    unsavedUniversalTodos: state.unsavedUniversalTodos, 
    userAuthSession: state.userAuthSession 
    }; 
} 

// Wrap the component to inject dispatch and state into it 
export default connect(select)(App); 

Navbar.jsx：

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { Link } from 'react-router'; 

class UserDropdown extends Component { 
    render() { 
    return (
     <li className="dropdown"> 
     <a href="#" className="dropdown-toggle" 
        data-toggle="dropdown" 
        role="button" 
        aria-haspopup="true" 
        aria-expanded="false"> 

        My Account <span className="caret"></span> 
     </a> 

     <ul className="dropdown-menu"> 
      <li><Link to="/settings">Settings</Link></li> 
      <li role="separator" className="divider"></li> 
      <li onClick={this.props.logout}><a href="#">cogout</a></li> 
     </ul> 
     </li> 
    ); 
    } 
} 

export default class Navbar extends Component { 

    render() { 
    var todos; 
    var loginTab; 
    var signupTab; 
    var userDropdown; 
    if (this.props.userAuthSession.isLoggedIn) { 
     todos = <li><Link to="/dash"> Todos </Link></li>; 
     userDropdown = (<UserDropdown logout={this.props.logout}/>); 
    } else { 
     loginTab = <li><Link to="/login"> Login </Link></li>; 
     signupTab = <li><Link to="/signup"> Sign Up</Link></li>; 
    } 

    return (
     <nav className="navbar navbar-default"> 
     <div className="container-fluid"> 

      <div className="navbar-header"> 
      <Link className="navbar-brand" to="/"> Sample App</Link> 
      </div> 

      <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul className="nav navbar-nav navbar-right"> 

       { todos } 

       <li><Link to="/about">About Us</Link></li> 

       { loginTab } 
       { signupTab } 

       { userDropdown } 

      </ul> 
      </div> 

     </div> 
     </nav> 

    ); 
    } 
} 

SettingsPage.jsx：

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { Link } from 'react-router'; 

class UserLogout extends Component { 
    render() { 
    return (

     <ul> 
      <li onClick={this.props.logout}><a href="#">Logout</a></li> 
     </ul> 

    ); 
    } 
} 

export default class SettingsPage extends Component { 
    render() { 

    var userLogout; 

    userLogout = (<UserLogout logout={this.props.logout}/>); 
    return (
     <div> 
     <h1> Settings</h1> 
     {userLogout} 
     </div> 
    ); 
    } 
} 

Answer 1

您的代碼看起來不錯大部分。雖然你可以清理你的渲染方法。這可能是因爲你如何試圖呈現它：

export default class SettingsPage extends Component { 
    render() { 
    return (
     <div> 
     <h1> Settings</h1> 
     <UserLogout logout={this.props.logout}/> 
     </div> 
    ); 
    } 
}