react自定义组件

tsx组件

interface UserCardProps {
    name: string;
    age: number;
    isOnline?: boolean;
}

function UserCard({ name, age, isOnline = false }: UserCardProps) {
    const nextYearAge = age + 1;

    return (
        <div className={isOnline ? "online" : "offline"}>
            <h3>{name}</h3>
            <p>年龄: {nextYearAge}</p>
        </div>
    );
}
export default UserCard;

使用

import UserCard from './App2.tsx' 

<UserCard name="李四" age={33} isOnline={true} />;