【React】react学习笔记04-React组件对象的三大属性-属性值【props】

定义

用于接收上层组件传入的参数的对象！

DEMO

这里是一个简单的传值到组件内部的demo：

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <!--bable转换库，ES语法以及Jax语法的转换-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="content"></div>

    <script type="text/babel">
        //定义组件
        class ComponentA extends React.Component{
            //构造函数，在初始化组件的时候会执行
              constructor(props){
                  super(props);
                  //state的值是从props中获取的上层对象传入的参数
                  this.state={
                      name:this.props.name,
                      age:this.props.age
                  }
              }
            //render会进行页面的渲染，当state中数据更新或者发送ajax等事件被监听到都会触发render的刷新
              render(){
                  //从state中取值
                  const name = this.state.name;
                  const age = this.state.age;
                  return(
                      <div>
                          <p>名字:{name}</p>
                          <p>年龄:{age}</p>
                      </div>
                  );
              }
        }
//传入参数name以及age

        ReactDOM.render(<ComponentA  name={'aaa'} age={20}/>,document.getElementById("content"));


    </script>


</body>
</html>

页面展现效果

调用组件时传入的参数name以及age在组件内部初始化时被获取到值，并且在render时被state渲染到页面上：

扩展

1、默认值：

props中的属性是可以设置默认值的：

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <!--bable转换库，ES语法以及Jax语法的转换-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="content"></div>

    <script type="text/babel">
        //定义组件
        class ComponentA extends React.Component{
            //构造函数，在初始化组件的时候会执行
              constructor(props){
                  super(props);
                  //state的值是从props中获取的上层对象传入的参数
                  this.state={
                      name:this.props.name,
                      age:this.props.age
                  }
              }
            //render会进行页面的渲染，当state中数据更新或者发送ajax等事件被监听到都会触发render的刷新
              render(){
                  //从state中取值
                  const name = this.state.name;
                  const age = this.state.age;
                  return(
                      <div>
                          <p>名字:{name}</p>
                          <p>年龄:{age}</p>
                      </div>
                  );
              }
        }
        //指定默认值
        ComponentA.defaultProps = {
            name:'Jerry',
            age:30

        }
        //这里我没有传任何参数
        ReactDOM.render(<ComponentA />,document.getElementById("content"));


    </script>


</body>
</html>

　　页面显示效果：

名字:Jerry

年龄:30

2、约束：

给传入的props添加约束，规范数据类型与添加约束：

官网实例：https://react.docschina.org/docs/typechecking-with-proptypes.html

由于博主版本不对，所以测试编译报错，所以了解下就好，使用脚手架搭建的React环境不会存在版本问题。

3、扩展运算符【...】

 render(){
                  //从state中取值
                  const Student = { name : 'Rose' , level: 100};
                  const Student2= {...Student};

                  const array = [1,2,3,4,5];
                  const array2 = [0, ...array,6]

                  return(
                      <div>
                          <p>名字:{Student2.name}</p>
                          <p>array2:{array2}</p>
                      </div>
                  );
              }

渲染结果：

名字:Rose

array2:0123456

【React】react学习笔记04-React组件对象的三大属性-属性值【props】

猜你喜欢