React - 组件实例三大属性（props的使用）

一. props 概念

1. 每个组件对象都会有props（properties的简写）属性
2. 组件标签的所有属性都保存在props中
3. 通过标签属性从组件外向组件内传递变化的数据

二. props 作用

1. 注意：组件内部不要修改props数据
2. 接收组件外部传递过来的数据
3. 内部读取某个属性值

三. props 的使用

1. props的基本使用

// 创建组件
class Person extends React.Component {
    render() {
    	// 接收组件外部传递过来的数据
    	const { name, sex, age } = this.props
        return (
            <ul>
                <li>姓名:{name}</li>
                <li>性别:{sex}</li>
                <li>年龄:{age}</li>
            </ul>
        )
    }
}
// 渲染组件
ReactDOM.render(<Person name="tom" sex="男" age={18} />, document.getElementById("root"))
let p = { name: "tom", sex: "男", age: 18 }
ReactDOM.render(<Person {...p} />, document.getElementById("root"))

2. 对props进行限制

// 创建组件
class Person extends React.Component {
    render() {
        // 接收组件外部传递过来的数据
        const { name, sex, age } = this.props
        return (
            <ul>
                <li>姓名:{name}</li>
                <li>性别:{sex}</li>
                <li>年龄:{age}</li>
            </ul>
        )
    }
}
// 对标签属性进行类型、必要性限制
Person.propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number
}
// 指定默认标签属性值
Person.defaultProps = {
    sex: "未填写",
    age: 18
}
// 渲染组件
ReactDOM.render(<Person name="tom" />, document.getElementById("root"))
let p = { name: "tom", sex: "男", age: 18 }
ReactDOM.render(<Person {...p} />, document.getElementById("root"))

3. props的简写方式

// 创建组件
class Person extends React.Component {
    // 构造器
    constructor(props) {
        console.log(props)
        super(props)
        console.log(this.props)
    }
    // 对标签属性进行类型、必要性限制
    static propTypes = {
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number
    }
    // 指定默认标签属性值
    static defaultProps = {
        sex: "未填写",
        age: 18
    }
    render() {
        // 接收组件外部传递过来的数据
        const { name, sex, age } = this.props
        return (
            <ul>
                <li>姓名:{name}</li>
                <li>性别:{sex}</li>
                <li>年龄:{age}</li>
            </ul>
        )
    }
}
// 渲染组件
ReactDOM.render(<Person name="tom" />, document.getElementById("root"))
let p = { name: "tom", sex: "男", age: 18 }
ReactDOM.render(<Person {...p} />, document.getElementById("root"))

4. 函数式组件使用props

function Person(props) {
    return (
        <ul>
            <li>姓名:{props.name}</li>
            <li>性别:{props.sex}</li>
            <li>年龄:{props.age}</li>
        </ul>
    )
}
// 对标签属性进行类型、必要性限制
Person.propTypes = {
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    age: PropTypes.number
}
// 指定默认标签属性值
Person.defaultProps = {
    sex: "未填写",
    age: 18
}
// 渲染组件
ReactDOM.render(<Person name="tom" />, document.getElementById("root"))
let p = { name: "tom", sex: "男", age: 18 }
ReactDOM.render(<Person {...p} />, document.getElementById("root"))