我有一个带有模拟登录的导航栏组件,它从模式中给我带来用户电子邮件,但是当我向我的 signinmenu 组件发送属性时,电子邮件显示为未定义。
我还发送了一个注销功能,这是有效的,但字符串电子邮件显示为未定义
导航栏组件
render() {
const { auth } = this.props;
const authenticated = auth.authenticated;
return (
<Menu inverted fixed="top">
<Container>
<Menu.Item as={Link} to="/" header>
<img src="/assets/images/logo.png" alt="logo" />
Re-vents
</Menu.Item>
<Menu.Item as={NavLink} to="/events" name="Events" />
<Menu.Item as={NavLink} to="/test" name="Test" />
{authenticated &&
<Menu.Item as={NavLink} to="/people" name="People" />}
{authenticated &&
<Menu.Item>
<Button
as={Link}
to="/createEvent"
floated="right"
positive
inverted
content="Create Event"
/>
</Menu.Item>}
{authenticated ? (
<SignedInMenu currentUser={auth.currentUser} signOut={this.handleSignOut} />
) : (
<SignedOutMenu signIn={this.handleSignIn} register={this.handleRegister} />
)}
</Container>
</Menu>
);
}
}
登录菜单组件
import React from 'react';
import { Menu, Image, Dropdown } from 'semantic-ui-react';
import { Link } from 'react-router-dom'
const SignedInMenu = ({signOut, currentuser}) => {
console.log(currentuser)
return (
<Menu.Item position="right">
<Image avatar spaced="right" src="/assets/images/user.png" />
<Dropdown pointing="top left" text={currentuser}>
<Dropdown.Menu>
<Dropdown.Item text="Create Event" icon="plus" />
<Dropdown.Item text="My Events" icon="calendar" />
<Dropdown.Item text="My Network" icon="users" />
<Dropdown.Item text="My Profile" icon="user" />
<Dropdown.Item as={Link} to='/settings' text="Settings" icon="settings" />
<Dropdown.Item onClick={signOut} text="Sign Out" icon="power" />
</Dropdown.Menu>
</Dropdown>
</Menu.Item>
);
};
export default SignedInMenu;
I know the string is on the props but when I tried to show in the text attribute or console.log appears as undefined
这是一个案例拼写错误 - 您currentUser
在父组件中传递 prop,并在子组件中接收它currentuser
。你需要
<SignedInMenu currentuser={auth.currentUser} signOut={this.handleSignOut} />
避免这类问题很棘手,但是在某些情况下使用React PropTypes会有所帮助,您可以考虑将它们添加到您的项目中。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句