javascript - 如何在循环列表时根据条件更改 className？

Question

我的组件有以下代码

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>

    )
}

在另一个组件中，我通过使用来自 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} 
        />
    )

我希望每个组件都有一个与其“已完成”状态相对应的类。如果为 true，则显示“已完成”，否则显示“未完成”。 className 中的这些更改是为了更改组件的背景颜色。

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

Answer 1

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

    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} 
        />
    )

您正在 DisplayBookings 组件中传递一个 prop“className”，但它应该是“completed”。

不确定这是否能解决您的问题，但这并没有按预期工作。