上一页 1 2 3 4 5 6 ··· 17 下一页
摘要: 写一个todoList小案例来体验一下组件的状态以及状态维护的注意点 import React, { Component } from 'react' import './css/01-index.css' export default class App extends Component { s 阅读全文
posted @ 2023-10-21 10:21 SadicZhou 阅读(12) 评论(0) 推荐(0) 编辑
摘要: 在vue中我们一般是通过v-for指令来进行循环渲染的,但react中没有封装相关指令供我们调用 在react中我们可以通过数组的map方法来进行数据的循环渲染 import React, { Component } from 'react' export default class App ext 阅读全文
posted @ 2023-10-20 11:32 SadicZhou 阅读(111) 评论(0) 推荐(0) 编辑
摘要: 状态就是组件的数据,由组件自己设置和更改,也就是说由组件自己维护,使用状态 的目的就是为了在不同的状态下使组件的显示不同(自己管理) 定义状态的方法 可以在构造函数中定义也可以直接在类中通过变量的形式来定义 /* eslint-disable eqeqeq */ import React, { Co 阅读全文
posted @ 2023-10-20 11:24 SadicZhou 阅读(16) 评论(0) 推荐(0) 编辑
摘要: 用法 1.给标签设置ref="username" 通过这个获取this.refs.username , ref可以获取到应用的真实dom 2. 给组件设置ref="username" 通过这个获取this.refs.username ,ref可以获取到组件对象 写法 import React, { 阅读全文
posted @ 2023-10-20 10:45 SadicZhou 阅读(17) 评论(0) 推荐(0) 编辑
摘要: React采用on+事件名的方式来绑定一个事件,注意,这里和原生的事件是有区别的,原生的事件全是小写 onclick , React里的事件是驼峰 onClick ,React的事件并不是原生事件,而是合成事件。 事件回调的几种写法 1.直接在组件内定义一个非箭头函数的方法,然后在render里直接 阅读全文
posted @ 2023-10-20 10:20 SadicZhou 阅读(74) 评论(0) 推荐(1) 编辑
摘要: 1.使用行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现: // 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p> 行内样式需要 阅读全文
posted @ 2023-10-19 10:45 SadicZhou 阅读(23) 评论(0) 推荐(0) 编辑
摘要: 一个项目肯定是由多个组件构成的,组件之前必然会存在相互嵌套的关系 在react中如果想要将一个组件嵌入到另外一个组件中 只需要在父组件的render函数的返回值中放入子组件即可 请看下面代码 import React, { Component } from "react" class Navbar 阅读全文
posted @ 2023-10-19 10:32 SadicZhou 阅读(77) 评论(0) 推荐(0) 编辑
摘要: 函数式组件即在React中通过函数的方式来声明一个组件 import React from "react" function App() { return ( <div> 函数式组件 <div>hhh</div> </div> ) } /* 16.8之前 //无状态 16.8之后 react hoo 阅读全文
posted @ 2023-10-19 10:26 SadicZhou 阅读(26) 评论(0) 推荐(0) 编辑
摘要: ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承, ES6 class 是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码 import React from 'react' import ReactDOM from ' 阅读全文
posted @ 2023-10-19 10:16 SadicZhou 阅读(27) 评论(0) 推荐(0) 编辑
摘要: 1.JSX语法 JSX 将 HTML 语法直接加入到 JavaScript 代码中,再通过翻译器转换到纯 JavaScript 后由浏览器执行。 在实际开发中,JSX 在产品打包阶段都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代码 更加直观并易于维护。 编译过程由Babel 的 阅读全文
posted @ 2023-10-17 12:24 SadicZhou 阅读(31) 评论(0) 推荐(0) 编辑
上一页 1 2 3 4 5 6 ··· 17 下一页