我有一個組件：
import { useState } from "react";
export const Sidebar = () => {
const [isOpened, setIsOpened] = useState(false);
const handleClick = () => {
setIsOpened(!isOpened);
}
const openedClassName = () => {
let classNameString = "collapse";
if (isOpened) {
classNameString = classNameString " show";
}
return classNameString;
}
return (
<ul className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<li className="nav-item active">
<a className="nav-link" href="#" onClick={handleClick}>
<i className="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="collapse1" className={`${openedClassName}`}>
<div className="bg-white py-2 collapse-inner rounded">
<a className="collapse-item" href="login.html">Login</a>
</div>
</div>
</li>
<div className="text-center d-none d-md-inline">
<button className="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
);
}
export default Sidebar;
我想在渲染之前在 collapse1 上生成 className，所以我添加了 opensClassName 函式。
但是我在我的班級中有整個箭頭函式，而不是字串......
這是測驗結果：
Expected the element to have class:
show
Received:
() => { let classNameString = "collapse"; if (isOpened) { classNameString = classNameString " show"; } return classNameString; }
uj5u.com熱心網友回復：
你忘了呼叫你的函式。您將函式定義傳遞給類名。
做就是了
<div id="collapse1" className={openedClassName()}>
它應該作業。記得用 () 表示要運行該函式。
uj5u.com熱心網友回復：
解決方法：（忘記呼叫函式）
<div id="collapse1" className={`${openedClassName()}`}>
更好的解決方案
<div id="collapse1" className={`collapse ${isOpened ? 'show' : null}`}>
uj5u.com熱心網友回復：
我不知道你是否認為它像臟代碼，但我更喜歡使用：
<div id="collapse1" className={${isOpened && "collapse"}}></div>
如果狀態 isOpened 為真，它會添加折疊類，如果不是，它不會做任何事情
uj5u.com熱心網友回復：
創建函式openClassName后，添加以下內容：
const myClassName = openedClassName();
然后在你的 jsx 中使用它：
<div id="collapse1" className={`${myClassName}`}>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/369630.html
標籤：javascript 反应