react 复合组件的实现需求点

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

Haeder组件Content组件Footer组件

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

具体实现使用vite创建工程

npm init vite@latest

创建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;

实现效果在App组件中组合使用

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

组件效果

总结利用了js函数是一个对象的特性，为主函数增加组合的属性，在组件使用的时候，可以方便的组合使用使用了children props，可以方便使用者将任意的结构传入组件内部可以继续扩展在复合组件内部使用context, 全局管理组件，可以管理组件内部的状态完整代码

/lujimoer/co…