React 初学 - 函数式组件使用props - 个人笔记22

最新推荐文章于 2022-07-04 09:45:14 发布
最新推荐文章于 2022-07-04 09:45:14 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： react.js 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amnesiac666/article/details/118859883
版权

类式组件的this指向实例对象，所以可以使用this获取state和props

在这里插入图片描述

函数式组件的this没有指向实例对象，所以无法使用state和refs。但是函数能够使用props属性，因为函数能接收参数
在这里插入图片描述
函数式组件传统写法：
在这里插入图片描述

如果打印this会发现是undefined
在这里插入图片描述
可以直接接收到props
在这里插入图片描述
打印
在这里插入图片描述

函数式组件的参数校验写法：

在这里插入图片描述
总结：函数式组件可以使用props

公孙元二
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native 基础学习笔记.rar
01-28
总的来说，“React Native基础学习笔记”可能涵盖以上所有内容，帮助初学者逐步掌握React Native的各个方面，从基础知识到高级特性，再到实际项目开发的实践经验。通过深入学习和实践，开发者可以充分利用React ...
formacao-react-alura:Alura在react.js培训中的课程文件和课堂笔记
04-07
2. **组件化编程**：深入探讨React组件的创建、使用和复用，包括无状态函数组件和类组件，以及如何通过props传递数据。 3. **状态管理**：介绍React的状态和生命周期方法，以及如何在组件之间共享数据，可能涉及...
React 初学 - 函数式组件 - 个人笔记6
树上骑个猴的博客
07-06 106
组件首字母要大写，标签要闭合。
React 初学 - 类式组件中的构造器和props - 个人笔记21
树上骑个猴的博客
07-16 382
render是类式中必要的 构造器的作用： 注意： 为什么写构造器，必调super()？ 打印实例自身props 如果构造器不写props 就获取不到实例的props 总结： 类中构造器可以省略 如果希望获得实例的props就要写构造器，如果写构造器，就要传props，不然获取不到this.props 如果接了props但又没传给pros，会导致接了没啥用，主要是要给super传过去： 总结： ...
React 初学 - props属性 - 个人笔记11
树上骑个猴的博客
07-12 291
在 React 中，你可以将属性传递给子组件。假设你有一个App组件，该组件渲染了一个名为Welcome的子组件，它是一个无状态函数组件。你可以通过以下方式给Welcome传递一个user属性： <App> <Welcome user='Mark' /> </App> 使用自定义 HTML 属性，React 支持将属性user传递给组件Welcome。由于Welcome是一个无状态函数组件，它可以像这样访问该值： const Welcome = (props) =&
React 初学 - props的基本使用 - 个人笔记17
树上骑个猴的博客
07-15 115
没有props属性的时候： 此时应该要使用props: 传多个Props属性： 案例2 写了三次组件标签，就会创建三次实例，就会调用三次render，都输出一次this props使用的简写：
React 初学 - 批量传递props - 个人笔记18
树上骑个猴的博客
07-16 536
如果很多个props属性，就会很繁琐： 1.可以使用展开运算符，但是需要key值一模一样。且对象要用花括号包裹 展开运算符介绍： 展开运算符不能直接运用到对象上 用花括号包裹， 就是ES6的语法，可以实现深拷贝一份对象了 react中可以不用花括号，是因为react+babel（否则要写成<Person {{…p}},document.getElementById(‘test3’)>）： 在react中，虽然有babel.js和react.development.js，但是只能用
React 初学 - 受控组件 - 个人笔记29
树上骑个猴的博客
07-22 110
总结：受控组件类似vue里的双向数据绑定。随着输入，直接控制状态。叫受控组件。 推荐平时多写受控组件，因为官方也是说尽量少用ref：
React 初学 - props的总结 - 个人笔记23
树上骑个猴的博客
07-19 74
this.props可以拿到全部的标签属性 对标签属性进行限制，限制的写法就是给自身类设置“propTypes”和“defaultProps”属性 注意点：大小写要区分好，如果写错了，限制就不起作用了。 类的限制属性，可以简写 函数式组件无法使用refs和state（最新版的hook可以使用）。但可以使用props。但如果给属性标签做限制，就无法用简写的方法了，并且限制属性只能定义在类的外面了 总结： react15以后，对属性类型做限制的库被抽离出来了： 于是对标签属性进行限制的写法，改变了
React 初学 - props的简写方式 - 个人笔记20
树上骑个猴的博客
07-19 212
props是只读的，如果想在类里直接改props的方式是不行的 如何改类自身的属性？ 抛砖引玉，普通的类通过statc可以给类自身加属性 给react类自身加属性，最初的写法 优化后的简写：
React 初学 - 通过props传递数据 - 个人笔记1
树上骑个猴的博客
06-30 167
传递一个名为 value 的 prop 到 Square 当中： class Board extends React.Component { renderSquare(i) { return <Square value={i} />; } } Square 组件中的 render 方法，以显示上文中传入的值： class Square extends React.Component { render() { return ( <button cla
React学习笔记之事件处理（二）
08-30
本文主要探讨了React中如何处理事件，并提供了相关的示例代码，旨在帮助初学者更好地理解和运用React事件。 首先，React事件的命名遵循驼峰式命名规则，而非传统HTML中的全小写。例如，在HTML中，我们可能会看到`...
react-practices-from-scratch-to-expert:从头开始对专家做出React-关于udemy的课程中的实践系列
04-05
Redux是常见的状态管理库，它与React结合使用，为应用提供集中式的状态容器。Redux强调单向数据流和纯函数，使状态变化变得可预测。课程会介绍Redux的基本原理，如`store`、`actions`和`reducers`，以及如何使用`...
vue和react学习笔记.rar
10-26
本压缩包包含的“vue和react学习笔记”是针对这两个框架的学习资源，旨在帮助初学者快速入门。 Vue.js是一个轻量级的JavaScript框架，它以简洁的API和易于上手的特点受到了开发者们的喜爱。Vue的核心特性包括声明式...
Module not found: Error: Can‘t resolve ‘react-dom/client‘
树上骑个猴的博客
07-04 3869
解决方案 当你的react版本低于18时,可以采用如下方案
Functions are not valid as a React child. This may happen if you return a Component instead of
树上骑个猴的博客
06-26 3150
报错信息：Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.使用一个{} 去渲染一个组件 就会报这样一个错误例如 是一个组件使用时不小心写成了 所以报上面的错误应该将 改为...
React 初学 - 使用 Array.map() 以及Array.Filter() 动态渲染元素 - 个人笔记53
树上骑个猴的博客
08-11 2914
条件渲染很有用，但是你可能需要组件来渲染未知数量的元素。通常在响应式编程中，程序员在应用程序运行时之前无法知道其 state，因为这在很大程度上取决于用户与该程序的交互。程序员需要提前编写代码来正确处理未知状态。在 React 中使用Array.map()阐明了这个概念。 在constructor中，创建一个this.state对象并定义两个 state：userInput应该初始化为空字符串，toDoList应该初始化为空数组。接下来，删除items变量旁边render()方法中的注释。取而代之的是，将存
React 初学 - 使用三元表达式进行条件渲染 - 个人笔记51
树上骑个猴的博客
08-11 2437
在继续使用动态渲染技术之前，还有最后一种方法可以渲染你想要的东西，它使用内置的 JavaScript 条件：三元运算符。三元运算符经常被用作 JavaScript 中if/else语句的缩写。它们不像传统的if/else语句那样健壮，但是在 React 开发人员中非常流行，原因之一就是 JSX 的编译原理，if/else语句不能直接插入到 JSX 代码中。你可能在前几个挑战就注意到了这一点–当需要if/else语句时，它总是在return语句外面。如果你想在 JSX 中实现条件逻辑，三元表达式是一个很好的选
react-draggable-tags组件如何使用
最新发布
04-27
react-draggable-tags 是一个 React 组件，用于实现可拖拽的标签列表。使用 react-draggable-tags 组件，你需要先安装该组件，可以使用 npm 安装，命令如下： ``` npm install react-draggable-tags ``` 接着，在项目中导入 react-draggable-tags 组件，代码如下： ```jsx import React, { useState } from 'react'; import DraggableTags from 'react-draggable-tags'; function App() { const [tags, setTags] = useState([ { id: 1, text: 'React' }, { id: 2, text: 'Vue' }, { id: 3, text: 'Angular' }, ]); const handleTagsChange = (tags) => { setTags(tags); }; return ( <DraggableTags tags={tags} handleTagsChange={handleTagsChange} /> ); } export default App; ``` 在上面的代码中，我们首先使用 useState 定义了一个 tags 状态，用于存储标签列表。接着，我们通过 DraggableTags 组件渲染了一个可拖拽的标签列表，并通过 handleTagsChange 回调函数来处理标签列表的变化。 最后，需要注意的是，react-draggable-tags 组件的样式需要自己定义或者引用外部样式库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值