react props属性

props属性信息

• 作用：从组件外部向组件内部传数据
• 可以设置默认属性 组件名.defaultProps = {}
• 设置必传参数与参数类型

  组件名.propTypes = {
  name : PropTypes.string.isRequired,
  age : PropTypes.number.isRequired
  };

• 多个属性值的时候传参方式{...数据对象}

// props的使用-从组件的外部向组件内部传递数据
class Person extends React.Component{
    render(){
        return(
            <ul>
                <li>姓名：{this.props.name}</li>
                <li>年龄：{this.props.age}</li>
                <li>性别：{this.props.sex}</li>
            </ul>
        )
    }
}
// 定义默认属性
Person.defaultProps = {
    sex:"默认的属性值女"
};
// 设置必传参数和传参类型
Person.propTypes = {
   name : PropTypes.string.isRequired,
   age : PropTypes.number.isRequired
};
// 定义数据
let person = {name:"Arale",sex:"woman",age:25};
// 渲染数据
ReactDOM.render(<Person {...person}/>, document.getElementById("example"));
ReactDOM.render(<Person name={person.name} age={person.age} />, document.getElementById("example1"));
ReactDOM.render(<Person name={person.name}  />, document.getElementById("example2"));