React中createRef()和useRef()的使用方法

一、createRef()

class Test extends Component {constructor(props) {super(props);this.state = { myDiv:createRef()}}componentDidMount(){console.log("this.myDiv.current", this.state.myDiv.current);// 打印结果： this.myDiv.current <div>ref获取的dom元素</div>}render() { return ( <div ref={this.state.myDiv}>ref获取的dom元素</div>);}
}export default Test;

二、useRef()

import React, {useState, useRef, createRef, useEffect } from 'react';const Test = ()=>{const [ index, setIndex ] = useState(1);const createRefDiv = createRef();const useRefDiv = useRef();if(!createRefDiv.current){createRefDiv.current = index;}if(!useRefDiv.current){useRefDiv.current = index;}return(<><div>createRefDiv.current: {createRefDiv.current}</div><div>useRefDiv.current: {useRefDiv.current}</div><div><button onClick={()=>setIndex(index+1)}>改变Index</button></div></>)}export default Test;

React中createRef()和useRef()的使用方法相关推荐

react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
React攻略秘籍二:React中使用css的五种方法（包括less与styled-compenents）
一.前言相信学过vue与react的小伙伴们应该都知道react使用css是多么麻烦,他没有像vue一样的规定好的样式,没有给css规定的作用域这也就react中一个组件样式会出现干扰另外一个组件样 ...
React中使用useState数据异步问题解决方法
产生问题: 在React的函数组件中使用useState进行数据存储,导致数据异步,不能及时获取当前最新的数据. 原因: 这是因为React里事件分为合成事件和原生事件,合成事件和钩子函数都是异步的, ...
React中标签字符串强制转html解析的方法
React中标签字符串强制转html解析的方法遇到的问题:在React中我们经常会请求数据并渲染到页面中间显示,我们可以直接使用更新state的方法,并使用tihs.state.(data)的方法进 ...
react中样式冲突_如何通过React中的样式使您的应用漂亮
react中样式冲突 by Vinh Le 由Vinh Le 如何通过React中的样式使您的应用漂亮 (How to make your apps pretty with styling in Re ...
react中useRef详细总结
一.什么是useRef const refContainer = useRef(initialValue); 1 返回一个可变的 ref 对象,该对象只有个 current 属性,初始值为传入的参数( ...
react中ref、createRef、React.forwardRef分别是什么？如何使用？
一.react中ref.createRef.React.forwardRef (1)Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧.对于大多数应用中的组件来说,这通常不是必需的.但 ...
echarts setoption方法_在Vue和React中使用ECharts的多种方法
前言俗话说:"工欲善其事,必先利其器".现如今已经有许多成熟易用的可视化解决方案,例如ECharts,AntV等等.我们可以把这些解决方案比作是一套套成熟的"工具&qu ...
react中的useRef
前言 react hooks 是 React 16.8 的新增特性. 它可以让我们在函数组件中使用 state .生命周期以及其他 react特性,而不仅限于 class 组件.react hooks ...

React中createRef()和useRef()的使用方法

一、createRef()

二、useRef()

React中createRef()和useRef()的使用方法相关推荐

最新文章

热门文章