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

我的组件具有以下代码

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中的这些更改用于更改组件的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}
        />
    )

您要在DisplayBookings组件中传递道具“ className”，但应该“完成”。

不知道这是否可以解决您的问题，但这不能按预期工作。

关于javascript - 循环时如何根据条件更改className？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60767013/