详解react如何实现复合组件-牛翰网

需求点

在一些react项目开发中，常常会出现一些组合的情况出现，比如一个card组件中，可能有以下几个组合功能

Haeder组件
Content组件
Footer组件

用户需要在不同的环境下去使用card组件，可能不需要Header或者footer, 这种情况下，常见的条件渲染会使组件的逻辑变得复杂与难于组合，因此，复合组件的方式就是为了解决以上需求

具体实现

1.使用vite创建工程

npm init vite@latest

2.创建components文件夹，创建Card.tsx组件

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;

实现效果

1.在App组件中组合使用

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;

2.组件效果