[React]Day03—React中类式组件的三大属性之props

最新推荐文章于 2023-10-31 11:29:39 发布

iChangebaobao

最新推荐文章于 2023-10-31 11:29:39 发布

阅读量359

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/iChangebaobao/article/details/116998036

版权

React 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

React中类式组件的三大属性之props

一、什么是props?

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”
在这里插入图片描述

二、props 的使用

1、在类式组件中使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React 类式组件的三大属性之一：props 的使用</title>
</head>
<body>
  <div id="test"></div>
  <!-- 引入react 核心库 -->
  <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <!-- 引入react-dom, 用于支持react操作DOM -->
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <!-- 引入prop-types, 用于对标签属性进行类型、必要性的限制，设置默认值 -->
  <script src="https://unpkg.com/prop-types@15.6/prop-types.min.js"></script>
  <!-- 引入babel, 用于将jsx 转为js -->
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

  <script type="text/babel">  /* 注意 type:text/babel  否则浏览器不认识 VDOM */
      class Person extends React.Component{
		// 构造器只调用一次，并且构造器可以省略不写
        constructor (props){
          super(props)
          console.log(this.props)
        }
       
        // 对标签属性进行类型、必要性的限制
        static propTypes = {
          person:{
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string
          }
        }
        // 指定默认标签属性值
        static defaultProps = {
          person:{
            sex:'男',
            age:18
          },
          interest:'舞蹈、音乐、写作'
        }
        render () {
          console.log(this);
          const {name,male,age} =this.props.person
          return(
            <ul>
              <li>姓名： {name}</li>
              <li>性别： {male}</li>
              <li>年龄： {age}</li>
            </ul>
          )
        }
      }
      let person={
        name:'花花',
        age:18,
        male:'女'
      }
      ReactDOM.render(<Person person={person}/>,document.getElementById('test') )
  </script>
</body>
</html>

2、在函数式组件中使用

function Person(props){
   const {name,sex,age} = props.person
   const interest = props.interest
   return(
     <ul>
       <li>姓名： {name}</li>
       <li>性别： {sex}</li>
       <li>年龄： {age}</li>
       <li>兴趣： {interest}</li>
     </ul>
   )
 }
 // 对标签属性进行类型、必要性的限制
 Person.propTypes = {
   person:{
      name: PropTypes.string.isRequired,
      age: PropTypes.number,
      sex: PropTypes.string
    }
  }
 // 指定默认标签属性值
 Person.defaultProps = {
   person:{
     sex:'男',
     age:18
   },
   interest:'舞蹈、音乐、写作'
 }

 let hh={
   name:'花花',
   age:20,
   sex:'女'
 }

 ReactDOM.render(<Person person={hh}/>,document.getElementById('test') )

3、限制传入的props属性类型

适用于React v15.5之后的版本，引入prop-types.js，可以用于对标签属性进行类型、必要性的限制，设置默认值

<script src="https://unpkg.com/prop-types@15.6/prop-types.min.js"></script>

类式组件简化写法，在类中用 static 定义

// 对标签属性进行类型、必要性的限制
static propTypes = {
  person:{
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string
  }
}

函数式组件，在函数外部定义

 // 对标签属性进行类型、必要性的限制
 Person.propTypes = {
   person:{
      name: PropTypes.string.isRequired,
      age: PropTypes.number,
      sex: PropTypes.string
    }
  }

4、设置props默认值

类式组件

// 指定默认标签属性值
static defaultProps = {
  person:{
    sex:'男',
    age:18
  },
  interest:'舞蹈、音乐、写作'
}

函数式组件

// 指定默认标签属性值
 Person.defaultProps = {
   person:{
     sex:'男',
     age:18
   },
   interest:'舞蹈、音乐、写作'
 }

三、props 的总结

props 是只读性的，state允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。
组件内部不要更改传进来的 props 。

四、拓展属性

将对象的所有属性通过props传入

let hh = {
	name:'花花',
	age:18
}

<Person {...hh}></Person>

上述写法等同于下面的写法

<Person name={hh.name} age={hh.age}></Person>

iChangebaobao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[React]Day03—React中类式组件的三大属性之props

React中类式组件的三大属性之一props的使用一、什么是props?二、props 的使用三、props 的总结一、什么是props?当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”二、props 的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
复制链接

扫一扫