![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 59
海阔天空BM
生活没有奇迹,只有轨迹
展开
-
react中的useEffect
是函数组件中执行的副作用,副作用就是指每次组件更新都会执行的函数,可以用来取代生命周期。原创 2022-11-07 16:12:34 · 1455 阅读 · 0 评论 -
react中hook的useState
useState不能在类组件中使用,在函数组件中使用hook,useState就是其中一种hook。不能在循环,条件,嵌套函数等中调用useState()useState方法可以定义一个state变量。原创 2022-11-06 15:26:18 · 1526 阅读 · 0 评论 -
react-router v6
React Router 6x比5x有哪些改动?内置组件将改为等语法变化改为等。原创 2022-11-05 17:13:50 · 440 阅读 · 0 评论 -
Taro3的编译配置
taro3的编译配置功能原创 2022-09-09 09:03:40 · 2367 阅读 · 0 评论 -
react写的简单的计时器
function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM....原创 2019-01-23 15:13:03 · 3486 阅读 · 0 评论 -
react中的阻止默认行为
在react中不像在HTML中一样用false,使用return false即可,而是要明确调用preventDefault例如:function handleClick(e){ e.preventDefault();}原创 2019-02-02 11:40:11 · 9531 阅读 · 0 评论 -
react中处理事件的编写方法
在react中元素处理事件时,通过jsx, 传递一个函数作为事件处理程序,而并不是跟html中一样,使用一个字符串。例如// 创建一个组件class Text extends React.Component{ constructor(props){ super(props) // 2. 必须有这个绑定,使this在回调中起到作用 this.handleClick = thi...原创 2019-02-02 11:05:16 · 551 阅读 · 0 评论 -
react中父组件给子组件传值
子组件state = { msg: 'a'}render(){ return<h1>{this.state.msg}</h1>}setInfo = (val)=>{//这里的val就是父组件通过调用这个方法,传的参数,在这里val的值为aaa this.setState({ msg: val })}父组件render(){ retur...原创 2019-01-22 14:34:05 · 5621 阅读 · 0 评论 -
react中的ref获取dom或者组件方法
1. 使用ref获取DOM的引用在vue中,如果想获取DOM元素时,可以使用this.$refs.引用名称在react中也可以像vue中,有类似的写法,如下为元素添加ref引用&lt;h2 ref="test"&gt;这是h2标签&lt;/h2&gt;在页面上获取元素this.refs.test2. 使用ref获取组件的引用为组件添加ref引用&l原创 2019-01-22 14:13:53 · 9172 阅读 · 0 评论 -
react中如何编写组件的样式
1. 使用行内样式注意点: 使用于所有的组件样式,react中规定,写行内样式时,要写在{{}}中,使用驼峰命名发<div style={{color: 'red', fontSize: 12}}>这是行内样式</div>2. 使用外联式样式配置对应的 loader 规则使用 .css 样式:运行 npm i style-loader css-lo...原创 2019-01-22 13:40:44 · 4091 阅读 · 0 评论 -
在react中绑定文本框与 state 中的值(双向数据绑定)
在 Vue 中,默认提供了 v-model 指令,可以很方便的实现 数据的双向绑定;但是,在 React 中没有双向数据绑定指令,也就是 只能把 state 上的数据绑定到 页面,无法把 页面中数据的变化,自动同步回 state ;如果需要把 页面上数据的变化,保存到 state,则需要程序员手动监听文本框的 onChange 事件,拿到最新的数据,手动调用 this.setSta...原创 2019-01-22 11:58:02 · 3243 阅读 · 0 评论 -
react中的setState方法
在react中如果你想修改数据的话,必须使用this.setState()方法可以在调用一个事件中使用this.setState()方法,从而达到修改数据的目的, 也可以用于文本框双向数据绑定例如render(){ //创建一个点击事件 return&amp;amp;lt;button onClick={()=&amp;amp;gt;textCount()}&amp;amp;gt;&amp;amp;lt;/button&a原创 2019-01-22 11:44:22 · 4765 阅读 · 0 评论 -
react创建组件的两种方式
1. 使用构造函数来创建组件如果需要传参,在函数中加一个props参数来接受,并且必须向外return一个合法的jsx创建的虚拟DOM。//1. 组件名首字母为大写 2. 必须return 合法的jsx// 这里就可以相当于子组件function Hellow (props){ //props为父组件传过来的数据 //如果打印props的话,只要子组件用的到东西都会打印出来,在这里...原创 2019-01-22 10:17:11 · 1825 阅读 · 0 评论 -
用于react 中的JSX语法配置方法
什么是JSX语法:就是符合 xml 规范的 JS 语法;(语法格式相对来说,要比HTML严谨很多)如何启用 jsx 语法?安装 babel 插件运行npm i babel-loader @babel/core @babel/plugin-transform-runtime @babel/runtime -D运行 npm i @babel/preset-env @babel/plu...原创 2019-01-21 17:22:54 · 5321 阅读 · 0 评论 -
react里的创建虚拟DOM
// 这个index.js是webpack开始打包构建的入口文件// 需要下载 react, react-dom这两个包// 使用react这个包,用来创建组件和虚拟DOM元素import React from 'react'// react-dom这个包,主要用来实现DOM操作,必须把组件或虚拟DOM元素,渲染到页面指定的容器中import ReactDOM from 'react-...原创 2019-01-21 16:54:10 · 760 阅读 · 0 评论