React如何从箭头函数返回字符串并应用于ClassName属性

问题原因 #

你在绑定className时直接传入了openedClassName函数本身，没有主动调用该函数，JSX渲染时会自动将函数对象转为字符串，因此最终类名变成了函数体的文本内容。

修复方案 #

方案1：调用已定义的函数 #

只需要给模板字符串中的openedClassName加上调用括号即可，修改对应代码行：

// 原错误写法
<div id="collapse1" className={`${openedClassName}`}>
// 修正后写法
<div id="collapse1" className={`${openedClassName()}`}>

方案2：简化逻辑（可选） #

这种简单的类名拼接场景不需要额外定义函数，可以直接在模板字符串中使用三元表达式，代码更简洁：

<div id="collapse1" className={`collapse ${isOpened ? 'show' : ''}`}>

修正后完整的组件代码示例：

import { useState } from "react";

export const Sidebar = () => {
    const [isOpened, setIsOpened] = useState(false);

    const handleClick = () => {
        setIsOpened(!isOpened);
    }

    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={`collapse ${isOpened ? 'show' : ''}`}>
                    <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;

内容的提问来源于stack exchange，提问作者sineverba