#javascript #reactjs
#язык JavaScript #реагирует на
Вопрос:
У меня есть компонент:
import { useState } from "react"; export const Sidebar = () =gt; { const [isOpened, setIsOpened] = useState(false); const handleClick = () =gt; { setIsOpened(!isOpened); } const openedClassName = () =gt; { let classNameString = "collapse"; if (isOpened) { classNameString = classNameString " show"; } return classNameString; } return ( lt;ul className="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar"gt; lt;li className="nav-item active"gt; lt;a className="nav-link" href="#" onClick={handleClick}gt; lt;i className="fas fa-fw fa-folder"gt;lt;/igt; lt;spangt;Pageslt;/spangt; lt;/agt; lt;div id="collapse1" className={`${openedClassName}`}gt; lt;div className="bg-white py-2 collapse-inner rounded"gt; lt;a className="collapse-item" href="login.html"gt;Loginlt;/agt; lt;/divgt; lt;/divgt; lt;/ligt; lt;div className="text-center d-none d-md-inline"gt; lt;button className="rounded-circle border-0" id="sidebarToggle"gt;lt;/buttongt; lt;/divgt; lt;/ulgt; ); } export default Sidebar; Я хочу создать имя класса в collapse1 ПЕРЕД отрисовкой, поэтому я добавил функцию openedClassName.
Но у меня в классе есть вся функция стрелки, а не строка…
это результат теста:
Expected the element to have class: show Received: () =gt; { let classNameString = "collapse"; if (isOpened) { classNameString = classNameString " show"; } return classNameString; } Ответ №1:
Вы забыли вызвать свою функцию. Вы передаете определение функции в имя класса.
Просто сделай
lt;div id="collapse1" className={openedClassName()}gt; И это должно сработать. Не забудьте использовать (), чтобы сказать, что вы хотите запустить функцию.
Комментарии:
1. Нет необходимости в шаблонном литерале:
className={openedClassName()}2. Спасибо, что указали на это! Просто скопируйте вставленный xD
Ответ №2:
решение: (забыл вызвать функцию)
lt;div id="collapse1" className={`${openedClassName()}`}gt; лучшее решение
lt;div id="collapse1" className={`collapse ${isOpened ? 'show' : null}`}gt; Ответ №3:
Я не знаю, считаете ли вы это грязным кодом, но я бы предпочел использовать:
lt;div id="collapse1" className={${isOpened amp;amp; "collapse"}}gt;lt;/divgt; Если состояние открыто верно, оно добавит класс collapse, если нет, оно ничего не сделает
Ответ №4:
После создания функции openedClassName добавьте следующее:
const myClassName = openedClassName(); Затем в вашем jsx используйте его вместо:
lt;div id="collapse1" className={`${myClassName}`}gt;