react中的props

Props

props就是传递的数据，是我们在使用组件时候的一种通信方案

class MyComponent extends React.Component{
        render(){
            // 通过props接收并解构出来
            const {name,age,sex}=this.props
            return(
                <div>
                    <ul>
                        <li>我的名字是{name}</li>
                        <li>我今年{age}</li>
                        <li>我的性别是{sex}</li>
                    </ul>
                </div>
            )
        }
    }
    // 对props传值进行限定
    MyComponent.propTypes={
        name:PropTypes.string.isRequired,
        sex:PropTypes.string,
        age:PropTypes.number,
    }
    // 指定默认值
    MyComponent.defaultProps={
        age:18,
        sex:"男"
    }
    // 渲染组件时传递数据
    ReactDOM.render(<MyComponent name='Lili' age={24} sex='女' />,document.getElementById('test'))

批量传值

const p = {name:"Mary",age:15,sex:"女"}
// ...拓展运算符
ReactDOM.render(<MyComponent {...p} />,document.getElementById('test'))

简写props

在类组件中配置传值类型限定及默认值

// 1.创建一个类组件
    class MyComponent extends React.Component {
        // 配置propTypes
        static propTypes = {
            // 这里表示你传值的时候 name是字符串且必须有
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
        }
        // 配置默认值
        static defaultProps = {
                age:18,
                sex:"男"
        }
        render() {
            const { name, age, sex } = this.props
            return (
                <div>
                    <ul>
                        <li>我的名字是{name}</li>
                        <li>我今年{age}</li>
                        <li>我的性别是{sex}</li>
                    </ul>
                </div>
            )
        }
    }