在 React 中，Props（屬性）是組件間通信和數據傳遞的核心機制。通過合理使用 Props，開發者可以構建動態、可複用且易於維護的組件體系。本文將深入探討 Props 的核心概念、使用方法及最佳實踐，幫助開發者全面掌握這一重要特性。

一、Props 的核心概念與作用

• 定義與特性

  Props 是 "Properties" 的縮寫，代表傳遞給組件的只讀數據塊，其核心特性包括：

  • 單向數據流：只能從父組件傳遞到子組件，形成清晰的層級關係。

  • 動態數據傳遞：允許組件根據傳入的 Props 渲染不同內容，例如電商網站中展示不同商品信息的卡片。

  • 類型安全：可通過TypeScript或 PropTypes 庫定義數據類型，避免運行時錯誤。

• 與 State 的區別

  • Props 用於外部傳入數據，而 State 用於管理組件內部狀態。例如，表單輸入值適合用 State 存儲，而用户信息展示則依賴 Props 傳遞。

二、Props 的基礎用法

• 傳遞與接收

  • 父組件通過屬性形式傳遞數據：

    function App() {
        return (
            <div>
                <h1>歡迎來到商店</h1>
                <ChildComponent title="商品 A" price={99}/>
            </div>
        )
    }
    

  • 子組件通過 props 對象接收（會觸發類型檢查 Unresolved component prop）：

    const ChildComponent = (props) => (
        <div>{props.title} - ￥{props.price}</div>
    );
    
    export default ChildComponent;
    

• 解構賦值優化

  • 使用對象解構提升代碼可讀性（不會觸發類型檢查）：

    const ChildComponent = ({title, price}) => (
        <div>{title} - ￥{price}</div>
    );
    
    export default ChildComponent;
    

• 動態數據渲染

  • Props 支持多種數據類型，包括字符串、數字、數組、函數等。例如傳遞函數實現交互：

    const MyButton = ({onClick, children}) => (
        <button onClick={onClick}>
            {children}
        </button>
    );
    
    export default MyButton;
    

  • 當點擊“購買商品”按鈕時，調用 handlePurchase 函數，彈出一個對話框，顯示購買的商品 ID（在這個示例中始終為 1）。

    function App() {
    
        const itemId = 1;
    
        const handlePurchase = (id) => {
            alert(`您已購買商品 ID: ${id}`);
        };
    
        return (
            <div>
                <h1>歡迎來到商店</h1>
                <ChildComponent title="商品 A" price={99}/>
                <MyButton onClick={() => handlePurchase(itemId)}>購買商品</MyButton>
            </div>
        )
    }
    

三、高級技巧與模式

• 默認值與類型校驗（推薦使用 TypeScript ）

  • 在參數解構中設置默認值避免未傳 Props 導致的錯誤：

    const ChildComponent = ({title = "默認商品", price = 10}) => (
        <div>{title} - ￥{price}</div>
    );
    

  • 在 TypeScript 中，你可以為組件的 props 定義一個接口（interface），指定每個 prop 的類型：

    interface ChildComponentProps {
        title: string;
        price: number;
    }
    
    const ChildComponent = (props: ChildComponentProps) => (
        <div>{props.title} - ￥{props.price}</div>
    );
    

  • 類型檢查與默認值的最佳結合方式：

    interface ChildComponentProps {
        title?: string;
        price?: number;
    }
    
    const ChildComponent: React.FC<ChildComponentProps> = ({ title = '默認商品', price = 10 }) => (
        <div>{title} - ￥{price}</div>
    );
    
    export default ChildComponent;
    

• 默認值與類型校驗

  • 使用 defaultProps 在 TypeScript 中是有效的，但有時會導致類型推斷的問題，尤其是在更復雜的情況中。在這種情況下，使用參數解構的方式來直接設置默認值通常更為推薦。

    ChildComponent.defaultProps = {
        title: "默認商品",
        price: 10,
    };
    

  • 使用 PropTypes 進行類型檢查：

    import PropTypes from "prop-types";
    
    ChildComponent.propTypes = {
        title: PropTypes.string.isRequired, 
        price: PropTypes.number,
    };
    

• 避免 Prop Drilling

  • 當多層組件需要共享 Props 時，可使用 Context API 或狀態管理工具（如 Redux）替代逐層傳遞，減少冗餘代碼。

• Render Props 模式

  • 通過傳遞函數型 Props 實現邏輯複用：

    import {useEffect, useState} from "react";
    
    const DataFetcher = ({ render }) => {
        const [data, setData] = useState([]);
    
        useEffect(() => {
            // 模擬獲取數據
            setTimeout(() => {
                setData(['React', 'JavaScript', 'TypeScript']);
            }, 1000);
        }, []);
    
        // 使用 render 函數來決定如何展示數據
        return <>{render(data)}</>;
    };
    
    export default DataFetcher;
    

    <DataFetcher
        render={(data) => (
            <ul>
                {data.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        )}
    />
    

四、常見問題

• 如何傳遞多個 Props？

  • 可通過展開運算符批量傳遞：

    const productInfo = { id: 1, name: "React指南", price: 89 };
    <ProductCard {...productInfo} />
    

• Props 與 State 如何協作？

  • 典型的場景是：父組件 State 變化觸發 Props 更新，子組件隨之重新渲染。例如搜索框的輸入值（State）傳遞給結果列表（通過 Props）。

五、總結

Props 是 React 組件化設計的基石，通過單向數據流和類型約束保障了代碼的健壯性。掌握 Props 的基礎用法與高級模式（如解構、Render Props），結合最佳實踐，能顯著提升開發效率和項目可維護性。