Welcome everyone

React组件的props属性

前端 汪明鑫 330浏览 0评论

props,refs,sate是React组件实例的三大属性

首先来学习props

 

基本概念:

每个组件对象都会有props属性,props是properties的简写

组件标签的所有属性都保存在props中

组件内部内部读取props的某个属性值: this.props.propertyName

作用: 通过标签属性从组件外向组件内传递数据(数据是只读的,不可修改)

实操:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>props</title>
</head>
<body>


<div id="demo"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">

  class Person extends React.Component{

      render(){
          console.log(this.props);
          return (
              <ul>
                  <li>姓名: </li>
                  <li>性别: </li>
                  <li>年龄: </li>
              </ul>
          )
      }
  }

  let person={username:'wmx',age:21,sex:'man'};

  ReactDOM.render(<Person username={person.username}  age={person.age} sex={person.sex}/>,document.getElementById('demo'));



</script>
</body>
</html>

 

 

使用 {this.props.propertyName} 来使用props的属性值

补充后的代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>props-demo</title>
</head>
<body>

<div id="demo"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">

  class Person extends React.Component{

      render(){
          //console.log(this.props);
          return (
              <ul>
                  <li>姓名: {this.props.username}</li>
                  <li>性别: {this.props.age}</li>
                  <li>年龄: {this.props.sex}</li>
              </ul>
          )
      }
  }

  let person={username:'wmx',age:21,sex:'man'};

  ReactDOM.render(<Person username={person.username}  age={person.age} sex={person.sex}/>,document.getElementById('demo'));



</script>
</body>
</html>

 

 

如果我们忘记了传某一个属性,比如sex,忘记传了,如何给sex指定一个默认值?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>设置默认值</title>
</head>
<body>

<div id="demo"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">

  class Person extends React.Component{
      render(){
          //console.log(this.props);
          return (
              <ul>
                  <li>姓名: {this.props.username}</li>
                  <li>性别: {this.props.age}</li>
                  <li>年龄: {this.props.sex}</li>
              </ul>
          )
      }
  }


  //默认值
  Person.defaultProps={
      sex: 'man'
  };

  let person={username:'wmx',age:21,sex:'man'};


  //忘记传sex   怎么办?   ----->使用默认值
  ReactDOM.render(<Person username={person.username}  age={person.age} />,document.getElementById('demo'));



</script>
</body>
</html>

页面同样能显示预期的效果

 

如果我们想给某些属性设置数据类型和数据的必要性,又该怎么做?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>设置数据类型和数据的必要性</title>
</head>
<body>

<div id="demo"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">

  class Person extends React.Component{
      render(){

          return (
              <ul>
                  <li>姓名: {this.props.username}</li>
                  <li>性别: {this.props.age}</li>
                  <li>年龄: {this.props.sex}</li>
              </ul>
          )
      }
  }

  //设置数据类型和必要性
  Person.propTypes = {
      username: React.PropTypes.string.isRequired,
      age: React.PropTypes.number.isRequired,
      sex: React.PropTypes.string.isRequired
  };

  //设置默认值
  Person.defaultProps={
      sex: 'man'
  };

  let person={username:'wmx',age:21,sex:'man'};




  ReactDOM.render(<Person username={person.username}   />,document.getElementById('demo'));




</script>
</body>
</html>

需要的数据没有传会报错

 

另外,看下数据类型  username需要的是string数据类型,传其他的数据类型也会报错

 

可以直接这样用   {…person}  传递数据,这个例子代码的最终版

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>demo-final-version</title>
</head>
<body>

<div id="demo"></div>


<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">

  class Person extends React.Component{
      render(){

          return (
              <ul>
                  <li>姓名: {this.props.username}</li>
                  <li>性别: {this.props.age}</li>
                  <li>年龄: {this.props.sex}</li>
              </ul>
          )
      }
  }

  //设置数据类型和必要性
  Person.propTypes = {
      username: React.PropTypes.string.isRequired,
      age: React.PropTypes.number.isRequired,
      sex: React.PropTypes.string.isRequired
  };

  //设置默认值
  Person.defaultProps={
      sex: 'man'
  };

  let person={username:'wmx',age:21,sex:'man'};

  ReactDOM.render(<Person {...person} />,document.getElementById('demo'));

</script>
</body>
</html>

 

 

 

 

转载请注明:汪明鑫的个人博客 » React组件的props属性

喜欢 (0)

说点什么

您将是第一位评论人!

提醒
avatar
wpDiscuz