组件实例三大属性之props

//创建组件

class Person extends React.Component{

render(){

// console.log(this);

const {name,age,sex} = this.props

//props是只读的

//this.props.name = 'jack' //此行代码会报错，因为props是只读的

return (

<ul>

</ul>

)

}

//对标签属性进行类型、必要性的限制

Person.propTypes = {

name:PropTypes.string.isRequired, //限制name必传，且为字符串

sex:PropTypes.string,//限制sex为字符串

age:PropTypes.number,//限制age为数值

speak:PropTypes.func,//限制speak为函数

}

//指定默认标签属性值

Person.defaultProps = {

sex:'男',//sex默认值为男

age:18 //age默认值为18

}

//渲染组件到页面

ReactDOM.render(<Person name={100} speak={speak}/>,document.getElementById('test1'))

ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))

const p = {name:'老刘',age:18,sex:'女'}

// console.log('@',...p);

// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))

ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))

function speak(){

console.log('我说话了');

}

</script>

简写（开发常用）：

//创建组件

class Person extends React.Component{

constructor(props){

//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props

// console.log(props);

super(props)

console.log('constructor',this.props);

}