React?組件之props屬性的使用

更新時(shí)間：2025年09月16日 08:13:23 作者：來(lái)一碗劉肉面

在React中,props是組件之間傳遞數(shù)據(jù)的一種方式,它是?React?組件的基礎(chǔ),用于將數(shù)據(jù)從父組件傳遞到子組件,本文就來(lái)詳細(xì)的介紹一下,感興趣的可以了解一下

一、類組件中

1.props的作用

數(shù)據(jù)傳遞: props 允許父組件向子組件傳遞數(shù)據(jù)。子組件可以使用這些數(shù)據(jù)來(lái)渲染內(nèi)容、改變顯示的內(nèi)容等。
控制組件行為: 通過(guò) props，父組件可以控制子組件的行為和外觀。這些屬性可以是基本數(shù)據(jù)類型、函數(shù)、數(shù)組等。
組件間的通信: props 是父子組件通信的重要機(jī)制。子組件不能直接修改父組件的狀態(tài)，但可以通過(guò) props 收到函數(shù)作為屬性，進(jìn)而通知父組件去更新?tīng)顟B(tài)。

2. 基本語(yǔ)法

傳遞props

父組件可以向子組件傳遞 props，使用自定義標(biāo)簽時(shí)就像設(shè)置 HTML 屬性一樣：

// 父組件
class ParentComponent extends React.Component {
    render() {
        return (
            <ChildComponent name="Alice" age={10} />
        );
    }
}

在上面的例子中，父組件 ParentComponent 向子組件 ChildComponent 傳遞了兩個(gè)屬性：name 和 age。

接收props

子組件通過(guò) this.props 訪問(wèn)傳遞給它的 props，可以在 render() 方法或其他生命周期方法中使用：

// 子組件
class ChildComponent extends React.Component {
    render() {
        return (
            <div>
                <p>Name: {this.props.name}</p>
                <p>Age: {this.props.age}</p>
            </div>
        );
    }
}

3.props的特點(diǎn)

不可變性: props 是只讀的，子組件不能直接修改從父組件傳遞來(lái)的 props。如果需要更新?tīng)顟B(tài)，應(yīng)該通過(guò)回調(diào)函數(shù)通知父組件由父組件來(lái)更改狀態(tài)。
動(dòng)態(tài)更新: 當(dāng)父組件的狀態(tài)發(fā)生變化時(shí)，React 會(huì)重新渲染子組件，并更新 props 中的值。

// 父組件
class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "Alice",
            age: 10
        };
    }

    incrementAge = () => {
        this.setState(prevState => ({ age: prevState.age + 1 }));
    };

    render() {
        return (
            <div>
                <ChildComponent 
                    name={this.state.name} 
                    age={this.state.age} 
                    incrementAge={this.incrementAge} 
                />
            </div>
        );
    }
}

// 子組件
class ChildComponent extends React.Component {
    render() {
        return (
            <div>
                <h1>Name: {this.props.name}</h1>
                <h2>Age: {this.props.age}</h2>
                <button onClick={this.props.incrementAge}>Increment Age</button>
            </div>
        );
    }
}

// 渲染組件
ReactDOM.render(<ParentComponent />, document.getElementById('root'));

4. 組件的propTypes和默認(rèn)props

 import PropTypes from 'prop-types';

// 定義屬性類型
    Person.propTypes = {
        name: PropTypes.string.isRequired, // 必傳，字符串
        age: PropTypes.number.isRequired,   // 必傳，數(shù)字
        sex: PropTypes.string                // 可選，字符串
        speak:PropTypes.func                 // 可選，函數(shù)
    };
    // 定義默認(rèn)屬性（可選）
    Person.defaultProps = {
        sex: '未知' // 如果未傳性別，默認(rèn)是 '未知'
    };

// 定義規(guī)則
    // Sum.屬性規(guī)則 = {
    //     name:'必傳，字符串'
    // }
    // 定義屬性類型
    static propTypes = {
        name: PropTypes.string.isRequired, // 必傳，字符串
        age: PropTypes.number.isRequired,   // 必傳，數(shù)字
        sex: PropTypes.string                // 可選，字符串
    };
    // 定義默認(rèn)屬性（可選）
    static defaultProps = {
        sex: '未知' // 如果未傳性別，默認(rèn)是 '未知'
    };

// 可以這樣訪問(wèn)
console.log(Person.propTypes); // 訪問(wèn)類中的靜態(tài) propTypes
console.log(Person.defaultProps); // 訪問(wèn)類中的靜態(tài) defaultProps

// 而不能這樣訪問(wèn)

const instance = new Person();
console.log(instance.propTypes); // 這會(huì)返回 undefined，因?yàn)?propTypes 是靜態(tài)的

使用 static 關(guān)鍵字的主要目的是將某些屬性或方法與類本身關(guān)聯(lián)，而不是與任何實(shí)例相關(guān)。在 React 組件中，這通常用于定義 propTypes 和 defaultProps，確保這些配置在類的上下文中清晰可見(jiàn)，并且可以通過(guò)類來(lái)直接訪問(wèn)。

二、函數(shù)組件中

函數(shù)式組件中三大屬性只有Props屬性可以使用

與類組件不同，函數(shù)組件沒(méi)有實(shí)例，直接接受 props 作為參數(shù)。

import React from 'react';

const MyComponent = (props) => {
    // const {title,content} = props
    return (
        <div>
            <h1>{props.title}</h1>
            <p>{props.content}</p>
        </div>
    );
};

// 或
//const MyComponent = ({ name, age }) => {
//    return (
//        <div>
//           <p>名稱: {name}</p>
//            <p>年齡: {age}</p>
//        </div>
//    );
//};

// 默認(rèn)屬性
MyComponent.defaultProps = {
    name: '匿名',
    age: 0,
};