React基础篇之组件实例三大属性props

props基本使用

<script type="text/babel">
  //创建组件
  class Person extends React.Component{
    render(){
      // console.log(this);
      const {name,age,sex} = this.props
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }
  //渲染组件到页面
  ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,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'))
</script>

对props进行限制

<script type="text/babel">
  //创建组件
  class Person extends React.Component{
    render(){
      // console.log(this);
      const {name,age,sex} = this.props
      //props是只读的
      //this.props.name = 'jack' //此行代码会报错，因为props是只读的
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </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>

props的简写方式

<script type="text/babel">
  //创建组件
  class Person extends React.Component{

    constructor(props){
      //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
      // console.log(props);
      super(props)
      console.log('constructor',this.props);
    }

    //对标签属性进行类型、必要性的限制
    static propTypes = {
      name:PropTypes.string.isRequired, //限制name必传，且为字符串
      sex:PropTypes.string,//限制sex为字符串
      age:PropTypes.number,//限制age为数值
    }

    //指定默认标签属性值
    static defaultProps = {
      sex:'男',//sex默认值为男
      age:18 //age默认值为18
    }
    
    render(){
      // console.log(this);
      const {name,age,sex} = this.props
      //props是只读的
      //this.props.name = 'jack' //此行代码会报错，因为props是只读的
      return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age+1}</li>
        </ul>
      )
    }
  }

  //渲染组件到页面
  ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
</script>

函数组件使用props

<script type="text/babel">
  //创建组件
  function Person (props){
    const {name,age,sex} = props
    return (
        <ul>
          <li>姓名：{name}</li>
          <li>性别：{sex}</li>
          <li>年龄：{age}</li>
        </ul>
      )
  }
  Person.propTypes = {
    name:PropTypes.string.isRequired, //限制name必传，且为字符串
    sex:PropTypes.string,//限制sex为字符串
    age:PropTypes.number,//限制age为数值
  }

  //指定默认标签属性值
  Person.defaultProps = {
    sex:'男',//sex默认值为男
    age:18 //age默认值为18
  }
  //渲染组件到页面
  ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
</script>

上一篇：React基础篇之组件实例三大属性state - 简书 (jianshu.com)

下一篇：React基础篇之组件组件实例三大属性refs - 简书 (jianshu.com)

点赞加关注，永远不迷路