我有一个带有模拟登录名的导航栏组件,它使我从模式中获取用户电子邮件,但是当我向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>
);
}
}
SignInMenu组件
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
答案 0 :(得分:2)
这是一种错别字-您在上级组件中将道具作为currentUser
传递,在子级中将其作为currentuser
接受。您需要
<SignedInMenu currentuser={auth.currentUser} signOut={this.handleSignOut} />
避免这类问题很棘手,但是在某些情况下使用React PropTypes可以有所帮助,您可以考虑将它们添加到项目中。
答案 1 :(得分:-1)
SignedInMenu是一个功能组件,其所有道具都包含在第一个参数中。所以您需要像这样使用它:
SignedInMenu = (props) => {
return <h1>Hello, {props.name}</h1>;
}