反应组件中未定义的参数
2019-02-13
3341
我有一个带有模拟登录的导航栏组件,该组件可从模式中为我带来用户电子邮件,但是当我向我的 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
2个回答
这是一个大小写错误 - 您在父组件中将 prop 作为
currentUser
传递,并在子组件中将其作为
currentuser
接收。您需要
<SignedInMenu currentuser={auth.currentUser} signOut={this.handleSignOut} />
避免这些问题很棘手,但使用 React PropTypes 在某些情况下会有所帮助,您可以考虑将它们添加到您的项目中。
Duncan Thacker
2019-02-13
SignedInMenu 是一个功能组件,其所有道具都包含在第一个参数中。因此您需要像这样使用它:
SignedInMenu = (props) => {
return <h1>Hello, {props.name}</h1>;
}
Alexey Baguk
2019-02-13