极智开发 | 讲解 React 组件三大属性之二：props

极智开发 | 讲解 React 组件三大属性之二：props

大家好，我是极智视界，本文讲解一下 React 组件三大属性之二：props。

React 组件，从概念上类似于 JavaScript 函数，它接受任意的入参，并返回用于描述页面展示内容的 React 元素。React 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。React 组件具有三大属性，即：​​state​​、​​props​​、​​refs​​。这里讲解三大属性之二：​​props​​​，要学习 ​​state​​​ 的同学可以移步我的这篇《​​极智开发 | 讲解 React 组件三大属性之一：state​​》 。

文章目录

​​1. props 理解​​​​2. props 示例​​

1. props 理解

上一篇咱们已经讲了 ​​state​​​，我们知道 ​​state​​ 主要用来控制 组件状态。​​props​​​ 相对于 ​​state​​ 主要有几点区别：

​​state​​​ 是可读可写的，可与用户进行交互修改，而​​props​​ 是只读的；​​state​​ 主要用于控制组件自身，而​​props​​ 可以用于组件本身的信息传递，也适用于 组件间 的数据传递，特别是 父子组件 间的信息传递；

我们在设计一个组件的时候，肯定希望这个组件能够复用，所以在设计的时候 往往不希望把组件的传参 写死， 而是可以动态的把 组件里需要的 数据传递进去，以提高组件的 灵活性，这个时候就需要用到咱们的 ​​props​​。

React 文档中，对 ​​props​​ 这么进行解释：

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

可以看出，​​props​​ 最重要的作用还是子组件间的信息传递。

下面让我们来看几个示例。

2. props 示例

来看一个 ​​props​​ 的基本使用示例：

对传参做了以上限制后，如果在渲染的时候传参类型不符合，就会抛出错误提示，这样可以很好的做到 都按我说的来 。 同样，我们也可以对上述的例子进行一个简写：

以上把控制传参的逻辑放到了 组件构建 里面，这样一来，逻辑就更加清晰了，总的来说只有两步：(1) 创建组件；(2) 渲染组件到页面。

说了这么多，是不是觉得还没说到 ​​props​​ 在 父子组件中信息传递 的方式，其实不然，来看 ​​Person​​ 组件的构造：

class Person extends React.Component{...}

可以看到 ​​Person​​​ 类其实是继承了 ​​React.Component​​​ ，可能由于 ​​React.Component​​​ 里面是什么，不是那么直观，所以导致 ​​props子组件信息传方式，看起来也不够直观​​​, 其实这里 ​​this.props​​​ 就是 ​​props​​ 父传子 的方式。没事，咱们继续举例子。 下面是一个 子传父 的例子：

// 1. 创建父组件class Parent extends React.Component { getName = (name) => { // 输出接收到子组件的参数 console.log(name) } render() { // 以函数的方式定义传值 return (

) }}// 2. 创建子组件class Children extends React.Component { render() { // 通过父组件的方法进行传值 this.props.getName('爸爸') return ( ) }}// 3. 渲染组件到页面ReactDOM.render(, document.getElementById('root'))

以上调用了 ​​Parent​​​ 组件渲染到页面，控制台会输出 ​​爸爸​​​，也就是父组件在 ​​render​​​ 函数中可以直接获取到 子组件 传递过来的参数，并进行展示。其实仔细分析一下，上面的组件 ​​Parent​​​、​​Children​​​ 之间的信息传递 也可以认为是兄弟组件之间的信息传递，因为它们同样继承于 ​​React.Component​​ ，而且 爸爸和孩子 往往也是好兄弟啊。

好了，以上分享了 讲解 React 组件三大属性之二：props。希望我的分享能对你的学习有一点帮助。

​​《极智开发 | 讲解 React 组件三大属性之二：props》​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。