#reactjs
Вопрос:
У меня есть json с другим временем, и я хочу изменить имя класса на основе этого состояния синхронизации.
{
"jobs": [
{
"id": 1,
"title": "Web Designer/Developer",
"location": "Tehran",
"time": "full time",
"company": "/images/l1.png"
},
{
"id": 2,
"title": "Marketing Director",
"location": "Tehran",
"time": "part time",
"company": "/images/l2.png"
},
{
"id": 3,
"title": "C Developer(senior)",
"location": "Tehran",
"time": "freelance",
"company": "/images/l3.png"
},]}
Я попробовал пакет имен классов, но я думаю, что что-то не так, потому что он не работает:
Обратите внимание, что это функциональный компонент react
import classNames from 'classnames';
const className = classNames({
'btn text-tiny self-center' : true,
'border-lightgreen text-lightgreen' : job.time === 'full time',
'border-lightpurpel text-lightpurpel' : job.time === 'part time',
'border-red text-red' : job.time === 'freelance'
})
<button className={className}>{job.time.toUpperCase()}</button>
Комментарии:
1. Единственное отличие от документации, которое я вижу, заключается в том, что вы используете несколько классов в одной записи/в качестве имени свойства. Не уверен, что это работает.
2. Почему это не работает? Что происходит? Редактировать: Отлично работает в песочнице: codesandbox.io/s/silly-breeze-0ilc2
3. ничего не происходит, просто они не будут добавлены в мой текст!
4. Вы хотели бы использовать какой-нибудь другой пакет?
5. Если да, то вы можете использовать
clsx— codesandbox.io/s/adding-multiple-classnames-9gfxi
Ответ №1:
Попробуйте сделать это с помощью функции react useState :
import "./styles.css";
import { useState } from "react";
const json = {
jobs: [
{
id: 1,
title: "Web Designer/Developer",
location: "Tehran",
time: "full time",
company: "/images/l1.png"
},
{
id: 2,
title: "Marketing Director",
location: "Tehran",
time: "part time",
company: "/images/l2.png"
},
{
id: 3,
title: "C Developer(senior)",
location: "Tehran",
time: "freelance",
company: "/images/l3.png"
}
]
};
const CustomButton = ({ jobIndex }) => {
const job = json.jobs[jobIndex];
const initialValue =
job.time === "full time"
? "border-lightgreen text-lightgreen"
: job.time === "part time"
? "border-lightpurpel text-lightpurpel"
: job.time === "freelance"
? "border-red text-red"
: "btn text-tiny self-center";
const [className, setClassName] = useState(initialValue);
return <button className={className}>{job.time.toUpperCase()}</button>;
};
export default function App() {
return <CustomButton jobIndex={0} />;
}
