Javascript 在列表上循环时，如何根据条件更改类名？

我的组件有以下代码

const Booking = (props) => {
    return (
            <li 
                className={props.completed ? 'completed' : 'incomplete'}
                key={props.id}
                id={props.id}
            >
                <h3>{props.date}</h3>
                <h4>{props.time}</h4>
                <h5>{props.name}</h5>
            </li>

    )
}

const-Booking=（道具）=>{
返回(

{props.date}
{props.time}
{props.name}

)
}

在另一个组件中，我通过使用json文件中的信息填充细节来创建多个“预订”组件

const DisplayBookings = () => {

    const display = (day) => allBookings.map(item =>
        item.day === day &&

        <Booking
            className={item.completed}
            key={item.id}
            id={item.id}
            time={item.time}
            name={item.name}
            date={item.date} 
        />
    )

const DisplayBookings=（）=>{
const display=（天）=>allBookings.map（项目=>
item.day==天&&
)

我希望每个组件都有一个对应于其“已完成”状态的类。如果为true，则显示“已完成”，否则显示“未完成”。类名中的这些更改用于更改组件的bg颜色

---

目前，每个组件都将保持不变，因为我无法从json文件中获得每个不同的值。

我认为您的代码中存在错误

    const Booking = (props) => {
    return (
            <li 
                className={props.completed ? 'completed' : 'incomplete'}
                key={props.id}
                id={props.id}
            >
                <h3>{props.date}</h3>
                <h4>{props.time}</h4>
                <h5>{props.name}</h5>
            </li>

    )
}

const DisplayBookings = () => {

    const display = (day) => allBookings.map(item =>
        item.day === day &&

        <Booking
            completed={item.completed}
            key={item.id}
            id={item.id}
            time={item.time}
            name={item.name}
            date={item.date} 
        />
    )

const-Booking=（道具）=>{
返回(

{props.date}
{props.time}
{props.name}

)
}
常量显示预订=（）=>{
const display=（天）=>allBookings.map（项目=>
item.day==天&&
)

您正在向DisplayBookings组件传递一个道具“className”，但它应该是“completed”

---

我不确定这是否能解决您的问题，但这并没有达到预期效果。

我认为您的代码中存在错误

    const Booking = (props) => {
    return (
            <li 
                className={props.completed ? 'completed' : 'incomplete'}
                key={props.id}
                id={props.id}
            >
                <h3>{props.date}</h3>
                <h4>{props.time}</h4>
                <h5>{props.name}</h5>
            </li>

    )
}

const DisplayBookings = () => {

    const display = (day) => allBookings.map(item =>
        item.day === day &&

        <Booking
            completed={item.completed}
            key={item.id}
            id={item.id}
            time={item.time}
            name={item.name}
            date={item.date} 
        />
    )

const-Booking=（道具）=>{
返回(

{props.date}
{props.time}
{props.name}

)
}
常量显示预订=（）=>{
const display=（天）=>allBookings.map（项目=>
item.day==天&&
)

您正在向DisplayBookings组件传递一个道具“className”，但它应该是“completed”

---

不确定这是否能解决您的问题，但这并没有达到预期效果。

您只需将已完成的道具传递给booking。请在下面查找代码片段。

const DisplayBookings=（）=>{const display=（day）=>allBookings.map（item=>item.day==day&）

如果

item.completed

应该在您的预订组件中填充

props.completed

，则应该是

您只需将已完成的道具传递给预订。在下面查找代码片段。
const DisplayBookings=（）=>{const display=（day）=>allBookings.map（item=>item.day==day&）
如果
项目已完成
应该填充预订组件中的
道具。已完成
应该是