如何在循环列表时根据条件更改类名？答案

【问题标题】：how to change className depending on condition while looping over a list?如何在循环列表时根据条件更改类名？
【发布时间】：2020-07-01 04:02:54
【问题描述】：

我的组件有以下代码

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

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

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

【问题讨论】：

您只需将完成的道具传递给预订即可。在下面找到 sn-p 代码。 const DisplayBookings = () => { const display = (day) => allBookings.map(item => item.day === day && <Booking completed ={true} key={item.id} id={item.id} time={item.time} name={item.name} date={item.date} /> )
如果 item.completed 应该在您的 Booking 组件中填写 props.completed，它应该是 <Booking completed={item.completed}

标签： javascript reactjs

【解决方案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 组件传递一个道具“className”，但它应该是“完成的”。

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

【讨论】：