在React / Redux

Question

我在Navbar组件中有一个注销按钮，但我想在另一个页面（SettingsPage组件）中获取它。我的方式与Navbar中的方式相同，但它不起作用。显示SettingsPage是因为我在App.jsx中调用它并且注销工作但是当我通过URL直接访问页面（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>
    );
  }
}