我如何使用props来改变我与react js的连接?

Question

我想改变我的菜单，当我的本地存储不是空的，但我挣扎着使用道具来做到这一点。

我有我的菜单条件在我的组件菜单和我的组件应用程序与我的导航:

组件菜单

function Menu(props) {
const showMenu = (props) => {
if (props.isLoggedIn === true) {
return (
<div className="ContainerMenu">
<ul className="Menu">
<Link to="/Home">
{" "}
<li>who am i</li>
</Link>
<li>some of my products</li>
<Link to="/contact">
<li>Contact me</li>
</Link>
<Link to="/">
<li className="connexion">Connexion</li>
</Link>
</ul>
</div>
);
} else {
return (
<div className="ContainerMenu">
<ul className="Menu">
<Link to="/">
<li className="connexion">Connexion</li>
</Link>
</ul>
</div>
);
}
};
useEffect(() => {
showMenu();
}, []);
return <div>{showMenu()}</div>;
}
export default Menu;

我想设置我的loggedIn true当我有我的电子邮件在我的本地存储。我想用道具来做，但是我想我遗漏了一些东西?

function App(props) {
const [isLoggedIn, setLoggedIn] = useState(false);
const ifLoggedIn = () => {
if (localStorage.getItem("connexion")) {
setLoggedIn(true);
}
};
useEffect(() => {
ifLoggedIn();
console.log(isLoggedIn);
});
return (
<Router>
<div>
<Menu isLoggedIn={ifLoggedIn} />
<Switch>
<Route path="/contact" component={MeContacter} />
<Route path="/Home" component={Home} />
<Route path="/" component={Connexion} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;

Answer 1

你打错字了

替换:

<Menu isLoggedIn={ifLoggedIn} />

由:

<Menu isLoggedIn={isLoggedIn} />

---

您的菜单组件结构不合理:

function Menu(props) {
const showMenu = () => {
if (props.isLoggedIn === true) {
return (
<div className="ContainerMenu">
<ul className="Menu">
<Link to="/Home">
{" "}
<li>who am i</li>
</Link>
<li>some of my products</li>
<Link to="/contact">
<li>Contact me</li>
</Link>
<Link to="/">
<li className="connexion">Connexion</li>
</Link>
</ul>
</div>
);
} else {
return (
<div className="ContainerMenu">
<ul className="Menu">
<Link to="/">
<li className="connexion">Connexion</li>
</Link>
</ul>
</div>
);
}
};
return <div>{showMenu()}</div>;
}
export default Menu;