REACT警告未知道具解析为子组件

时间:2017-02-03 10:24:00

标签: reactjs redux material-ui

当我尝试将道具传递给子组件时,我总是收到此警告

  

警告:标记上的未知道具logout。从中取出这个道具   元件。

这是我的代码:

import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';

import { connect } from 'react-redux';
import { logoutUser } from '../actions/auth.action';

import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FlatButton from 'material-ui/FlatButton';
import Toggle from 'material-ui/Toggle';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import NavigationClose from 'material-ui/svg-icons/navigation/close';

class Login extends React.Component {
  static muiName = 'FlatButton';

  render() {
    return (
      <FlatButton {...this.props} label="Login"
        containerElement={<Link to="/login">Setup</Link>}
        linkButton={true}
      />
    );
  }
}

const Logged = (props) => {

  const doLogout =()=>(props.logout);
  return(
    <IconMenu
      {...props}
      iconButtonElement={
        <IconButton><MoreVertIcon /></IconButton>
      }
      targetOrigin={{horizontal: 'right', vertical: 'top'}}
      anchorOrigin={{horizontal: 'right', vertical: 'top'}}
    >
      <MenuItem primaryText="Refresh" />
      <MenuItem primaryText="Help" />
      <MenuItem primaryText="Sign out" 
        onTouchTap={doLogout}
      />
    </IconMenu>
  )
};

Logged.muiName = 'IconMenu';

class MUIAppBar extends React.Component {

  state = {
    logged: (localStorage.getItem('laravel_user_token') !== null),
  };

  render() {
  // when user hover the title it would turn into pointer
    const styles = {
      title: {
        cursor: 'pointer',
      },
    };
    const { logoutUser } = this.props;

    return (
      <div>
        <AppBar
          title={<span style={styles.title}><IndexLink to="/">D:Vision</IndexLink></span>}
          iconElementRight={this.state.logged ? <Logged logout={logoutUser} /> : <Login />}
        />  
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
    return {
        logoutUser: () => (
            dispatch(logoutUser)
        )
    }
}

export default MUIAppBar =  connect(null, mapDispatchToProps)(MUIAppBar);

0 个答案:

没有答案