javascript - 错误 TS2339：类型“IntrinsicClassAttributes...”上不存在属性“{}”

Question

嗨，伙计们，我遇到了某种打字稿错误的问题，你能找个时间给我买个答案吗？错误行标有 //->>//

TS2339：“IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<RoomStatusProps,any> & HTMLProps<H...”类型上不存在属性“isOccupied”。

代码

    export class RoomCard extends React.Component<RoomCardProps> {
        render(): JSX.Element {
            const { name, level, isOccupied, currentBooking } = this.props;
    
            const reservationEntries = this.props.reservations
                .filter(entry => {
                    const time = moment.utc().utcOffset(new Date().getTimezoneOffset(), true);
                    const startTime = moment.utc(entry.start);
                    return time.isBefore(startTime) && time.isSame(startTime, 'day');
                })
                .map(entry => <ReservationEntry entry={entry} key={entry.id} />);
    
            return (
   //This line ->// <RoomWrapper isOccupied={isOccupied}>
                    <RoomInfo>
                        <Name>{name}</Name>
                        <Level>Level: {level}</Level>
                    </RoomInfo>
   //This line ->// <Status isOccupied={isOccupied}>
                        Room is currently {isOccupied ? `booked` : 'free'}
                    </Status>
                    {isOccupied && <ReservationEntry entry={currentBooking[0]} />}
                    {!!reservationEntries.length && (
                        <ReservationsHeader>Upcoming reservations:</ReservationsHeader>
                    )}
                    <ReservationsWrapper>{reservationEntries}</ReservationsWrapper>
                </RoomWrapper>
            );
        }
    }

房间包装器和迷人的状态，我想补充一点，这个项目是在 2.4.2 版本的打字稿上：

interface RoomCardProps {
    name: string;
    level: number;
    reservations: AssignedReservation[];
    currentBooking: AssignedReservation[];
    isOccupied: boolean;
}

interface RoomStatusProps {
    isOccupied: boolean;
    theme: object;
}

const RoomWrapper = glamorous.div<RoomStatusProps>(
    {
        width: 380,
        borderRadius: 5,
        paddingTop: 10,
        fontSize: fonts.small,
        margin: 10,
    },
    ({ isOccupied = false }) => ({
        border: `2px solid ${isOccupied ? contextColors.notAvailable : contextColors.available}`,
    }),
);

const RoomInfo = glamorous.div({
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    paddingLeft: 10,
});

const Name = glamorous.p({
    marginBottom: 2,
    fontSize: fonts.large,
});

const Level = glamorous.p({
    color: colors.dustyGray,
});

const Status = glamorous.p<RoomStatusProps>(({ isOccupied = false }) => ({
    color: isOccupied ? contextColors.notAvailable : contextColors.available,
    paddingLeft: 10,
}));

const ReservationsHeader = glamorous.p({
    paddingTop: 20,
    paddingLeft: 10,
    paddingBottom: 5,
});

const ReservationsWrapper = glamorous.ul({
    display: 'flex',
    flexDirection: 'column',
    [' :nth-child(2n)']: {
        background: colors.dustyGray,
    },
});

这都是与那个问题有关的

顺便说一句，问题仅在于<RoomWrapper isOccupied={isOccupied}>

标签： javascriptreactjstypescriptjenkinserror-handling