伙计们,我现在正在开发一个项目,我有一个由 antd Menu
项返回的组件。它有 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
Hook 。如果用户没有登录(所以user === null
),那么useEffect
中的if语句将不会被执行;否则数组 items
中的 Login
和 Register
组件将被删除并隐藏,只剩下前 2 个。
从console.log(items);
我们可以看到items
当前是什么样的。当用户登录时,它只有两个组件:
但是,在这种情况下我们仍然可以看到Login
和Register
存在:
那么为什么 JS 和 React 会渲染移除的组件呢?
最佳答案
如果您需要重新渲染。您可以将数组存储在某种状态中。如果将数组存储在普通的 javascript 变量中。 React 不会重新渲染组件。尝试像我下面给出的那样,
const [items, setItems] = useState([
{
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
setItems(items.splice(2, 2));
}
}, [user]);
console.log(items);
return <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal" items={items} />;
关于javascript - 为什么 javascript 会渲染移除的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72675510/