伙计们,我现在正在做一个项目,我有一个组件,由antd Menu
item返回.它有4个组件:Home
、Username
、Login
和Register
:
const items = [
{
label: <Link to='/'>Home </Link>, //- {JSON.stringify(user)}
key: 'home',
icon: <AppstoreOutlined />,
},
{
label: 'Username',
key: 'SubMenu',
icon: <SettingOutlined />,
children: [
{
label: 'Option 1',
key: 'setting:1',
},
{
label: 'Option 2',
key: 'setting:2',
},
{
label: <item onClick={logout}>Logout</item>,
key: 'setting:3',
icon: <LogoutOutlined />
},
],
},
{
label: <Link to='/register'>Register</Link>,
key: 'register',
icon: <UserAddOutlined />,
style: { marginLeft: 1030}, // problem: hard-coded margin
},
{
label: <Link to='/login'>Login</Link>,
key: 'login',
icon: <UserOutlined />,
style: { marginLeft: 'auto'},
},
];
useEffect(() => {
if (user) { // "user" is an object returned by userSelector
items.splice(2, 2);
}
}, [user]);
console.log(items);
return <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={items} />;
如你所见,我这里用的是useEffect
号钩子.如果用户未登录(so user === null
),则不会执行useEffect
中的If语句;否则,将删除并隐藏数组items
中的Login
和Register
组件,只剩下前2个.
From console.log(items);
we can see what items
is like currently. When a user is logged in, it does have only two components:
However we can still see Login
and Register
are there in such a circumastance:
那么,为什么js和react会渲染移除的组件呢?