首页 > 网络编程 > JavaScript > javascript类库 > React > React props属性

React 组件之props属性的使用

2025-09-16 08:12:36 作者：来一碗刘肉面

在React中,props是组件之间传递数据的一种方式,它是 React 组件的基础,用于将数据从父组件传递到子组件,本文就来详细的介绍一下,感兴趣的可以了解一下

在 React 中，props（即属性）是组件之间传递数据的一种方式。它是 React 组件的基础，用于将数据从父组件传递到子组件。

一、类组件中

1.props的作用

数据传递: props 允许父组件向子组件传递数据。子组件可以使用这些数据来渲染内容、改变显示的内容等。
控制组件行为: 通过 props，父组件可以控制子组件的行为和外观。这些属性可以是基本数据类型、函数、数组等。
组件间的通信: props 是父子组件通信的重要机制。子组件不能直接修改父组件的状态，但可以通过 props 收到函数作为属性，进而通知父组件去更新状态。

2. 基本语法

传递props

父组件可以向子组件传递 props，使用自定义标签时就像设置 HTML 属性一样：

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

在上面的例子中，父组件 ParentComponent 向子组件 ChildComponent 传递了两个属性：name 和 age。

接收props

子组件通过 this.props 访问传递给它的 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的特点

不可变性: props 是只读的，子组件不能直接修改从父组件传递来的 props。如果需要更新状态，应该通过回调函数通知父组件由父组件来更改状态。
动态更新: 当父组件的状态发生变化时，React 会重新渲染子组件，并更新 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和默认props

 import PropTypes from 'prop-types';

// 定义属性类型
    Person.propTypes = {
        name: PropTypes.string.isRequired, // 必传，字符串
        age: PropTypes.number.isRequired,   // 必传，数字
        sex: PropTypes.string                // 可选，字符串
        speak:PropTypes.func                 // 可选，函数
    };
    // 定义默认属性（可选）
    Person.defaultProps = {
        sex: '未知' // 如果未传性别，默认是 '未知'
    };

// 定义规则
    // Sum.属性规则 = {
    //     name:'必传，字符串'
    // }
    // 定义属性类型
    static propTypes = {
        name: PropTypes.string.isRequired, // 必传，字符串
        age: PropTypes.number.isRequired,   // 必传，数字
        sex: PropTypes.string                // 可选，字符串
    };
    // 定义默认属性（可选）
    static defaultProps = {
        sex: '未知' // 如果未传性别，默认是 '未知'
    };

// 可以这样访问
console.log(Person.propTypes); // 访问类中的静态 propTypes
console.log(Person.defaultProps); // 访问类中的静态 defaultProps

// 而不能这样访问

const instance = new Person();
console.log(instance.propTypes); // 这会返回 undefined，因为 propTypes 是静态的

使用 static 关键字的主要目的是将某些属性或方法与类本身关联，而不是与任何实例相关。在 React 组件中，这通常用于定义 propTypes 和 defaultProps，确保这些配置在类的上下文中清晰可见，并且可以通过类来直接访问。

二、函数组件中

函数式组件中三大属性只有Props属性可以使用

与类组件不同，函数组件没有实例，直接接受 props 作为参数。

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>
//    );
//};

// 默认属性
MyComponent.defaultProps = {
    name: '匿名',
    age: 0,
};

到此这篇关于React 组件之props属性的文章就介绍到这了,更多相关React props属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！