详解react如何实现复合组件

npm init vite@latest

import { PropsWithChildren } from "react";
import { CardProps } from "./type";
import "./card.css";

const Card = ({ children }: CardProps) => {

    return <div className="card">{children}</div>;

};


// card header

Card.Haeder = ({ children }: PropsWithChildren) => {

    return (
        <div className="header">
            <span>{children}</span>
        </div>
    );
};
 
// card content
Card.Content = ({ children }: PropsWithChildren) => {
    return <div className="content">{children}</div>;
};

// card footer
Card.Footer = ({ children }: PropsWithChildren) => {
    return <div className="footer">{children}</div>;
};

export default Card;

import Card from "./components/Card";

function App() {
    return (
        <div className="app">
            <Card>
                <Card.Haeder>card标题</Card.Haeder>
                <Card.Content>neirong</Card.Content>
                <Card.Footer>
                    <div className="footer-btn">
                        <button>取消</button>
                        <button>确认</button>
                    </div>
                </Card.Footer>
            </Card>
        </div>
        );
 }

export default App;