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

原创已于 2022-01-27 16:33:53 修改 · 536 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2019-09-27 19:13:32 首次发布

React 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了React中组件如何接收并使用上层组件传递的参数，包括props的基本使用、默认值设定、props类型约束及扩展运算符的应用。

定义

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

DEMO

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

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

</head>
<body>
    <!--react基础库-->
   <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.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>
   <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.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添加约束，规范数据类型与添加约束：

官网实例：使用 PropTypes 进行类型检查 – React

由于博主版本不对，所以测试编译报错，所以了解下就好，使用脚手架搭建的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