读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. React
  3. 正文

【04】react组件和props接收参数

2020年10月08日 80点热度 0人点赞 0条评论

在react应用中,可以使用两种方式来定义组件:函数和class类,

函数组件

import React from "react";
function Func_component(props) {
    return <div>
        <h2>这是一个函数组件:</h2>
        <p>{props.name}</p>
    </div>
}

export default Func_component

class类组件

import React from "react";

class Class_Component extends React.Component {
    render() {
        return <div>
            <h2>这是一个react的class组件</h2>
            <p>{this.props.name}</p>
        </div>
    }
}


export default Class_Component

当react应用在渲染我们所定义的组件之后,react会把jsx接收到的属性或者子组件转化为单个对象传递给组件,这个对象就是“props”。props只是用来接收父组件传给子组件的参数而已,它并不是组件本身自己的数据,所以组件的Props具有不可更改的特征,这就是react的一个规则:

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

组件如何接收接收props?

先说我们常见的函数组件,和我们在刚开始学习编程的时候一样,我们在定义一个方法的时候,根据需求会接收一些参数。那么react应用中,这样的方法就是“组件”。同样,在函数组件中接收父组件传递过来的参数也需要定义些“形参”,通过形参来接收父组件传过来的“实参”。如以上的函数组件代码中,在定义组件时,设置形参“props”,它是一个包含了组件属性和子组件的一个对象。

在class组件内直接通过this.props来接收父组件传过来的参数值。

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: react
最后更新:2020年10月08日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
hook Echarts redux CSS 小程序 悦读 canvas vue react taro 随笔 闲谈 git flutter Nginx 阅读 node mysql JavaScript
推荐文章
  1. React组件传值
  2. useContext()组件状态共享或者传值
  3. 【02】创建react应用的react元素和react组件
  4. react函数编程Hook笔记
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (40)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号