react-props

一， 类式组件使用props

             props属性用于给组件传递参数，且是只读属性

        使用：

class Demo extends React.Component{
      render(){

       const {name,age}=this.props
            return  <div>
                          <p>我的名字是{name}，我今年{age}岁了</p>
                       </div>

}


}
const  data = {
              name:‘小王’,
              age:18
}
//这里的{...data}是jsx里定义的专门用于在组件标签里面传参的写法
ReactDOM.render(<Demo  {...data} />,document.getElementById('test'))

对props进行限制,要使用这个功能，需要引入prop-Types库

import propTypes  from  'prop-types'


class Demo extends React.Component{
       render(){
           const {name,age} = this.props
           return <div>

           <p>我的名字是{name}，我今年{age}岁了</p>

          </div>                              


}

//在组件里面设置限制
//给属性设置限制
static propTypes={
//限定为字符串，且为必填
       name:PropTypes.string.isRequired,
//限定为数字，且为必填
       age:PropTypes.number.isRequired

}
//给属性设置默认值（如果没有传递的话，将使用默认值）
static.defaultProps={

     age:20

}


}
//在组件外面设置限制
Demo.propTypes={

name:PropTypes.string.isRequired,
age:PropTypes.number.isRequired


}
Demo.defaultProps={
        name:'小地瓜',
        age:'20'
}


const data = {
              name:'王',
              age:17

}

ReactDOM.render(<Demo  {...data} />,dicument.getElementById('test'))

二、函数式组件传递props

由于函数式组件没有实例对象，所以无法使用this.props，但是函数组件可以接受参数，其接受的形参就是props

function  Demo(props){
      const {name,age}=props
       return <div>
                <p>我的名字是（name）,我今年{age}岁了</p>

                </div>

}

//函数式组件对props进行限定，只能采用这种形式
Demo.propTypes= {
       name:PropTypes.string.isRequired,
       age:PropTypes.number.isRequired
}
Demo.defaultProps = {
      name:'小王',
      age:17
}
const data={
             name:'小王',
             age:19
}
ReactDOM.render(<Demo   {...data}/>,document.getElementById('test'))