React 组件之props属性的使用

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

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

// 父组件
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'));

 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 是静态的

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,
};