React组件的props属性 – 汪明鑫的个人博客

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属性

说点什么