詳解react如何實現復合組件

更新時間：2024年10月30日 08:49:45 作者：omijer

在一些react項目開發(fā)中,常常會出現一些組合的情況出現,這篇文章主要為大家介紹了復合組件的具體實現,感興趣的小伙伴可以跟隨小編一起學習一下

需求點

在一些react項目開發(fā)中，常常會出現一些組合的情況出現，比如一個card組件中，可能有以下幾個組合功能

Haeder組件
Content組件
Footer組件

用戶需要在不同的環(huán)境下去使用card組件，可能不需要Header或者footer, 這種情況下，常見的條件渲染會使組件的邏輯變得復雜與難于組合，因此，復合組件的方式就是為了解決以上需求

具體實現

1.使用vite創(chuàng)建工程

npm init vite@latest

2.創(chuàng)建components文件夾，創(chuàng)建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.組件效果