1 介绍

react组件的三大属性：

props属性：封装传递给组件的参数
state属性：组件的状态，当值发生改变后，重新渲染组件
refs属性：
（1）通过该属性可以去访问DOM元素或render函数中的react元素（虚拟的DOM元素） ——DOM元素或render函数中的react元素的代理（句柄）
（2）本质是ReactDOM.render()函数返回的实例（组件实例或DOM节点）

Refs在计算机中称为弹性文件系统。React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。

作用：Refs时React提供给我们安全访问DOM元素或者某个组件实例的句柄。在类组件中，React将ref属性中第一个参数作为DOM中的句柄。在函数组件中，React用hooks的api useRef也能获得ref。

2 使用方法

2.1 createRef（版本>=React16.3）

一般在构造函数中将refs分配给实例属性，以供组件的其他方法中使用。

1、对于html元素：可以获取元素实例

示例代码：

class Refs extends React.Component {constructor(props) {super(props);// 在构造函数中初始化一个ref，然后在return中就可以使用了this.myRef = React.createRef();console.log(this.myRef);}componentDidMount() { // 在render()函数执行完成后调用this.myRef.current.innerHTML = "橘猫吃不胖"; // this.myRef中有一个current属性}render() {return (<div>{/*如果ref属性被用于html，那么它的值就是底层DOM元素*/}<div ref={this.myRef}></div></div>);}
}

2、可以和类组件进行绑定 —— 代表类组件的实例

示例代码：

class Refs extends React.Component {constructor(props) {super(props);this.myRef = React.createRef();}componentDidMount() {// 在父组件中调用了子组件的方法this.myRef.current.change();}render() {return <Children ref={this.myRef}/>}
}class Children extends React.Component {change() {console.log("橘猫吃不胖变身");}render() {return <span>橘猫吃不胖</span>}
}

2.2 回调Refs

React将在组件挂载时，会调用ref回调函数并传入DOM怨怒是，当卸载时调用它并传入null。早componentDidMount或componentDidUpdate触发前，React会保证refs一定是最新的。

示例代码：

class Refs extends React.Component {constructor(props) {super(props);this.targetRef = null;this.myRef = (e) => this.targetRef = e;}componentDidMount() {if (this.targetRef) {this.targetRef.innerHTML = "橘猫吃不胖";}}render() {return <div ref={this.myRef}/>}
}

2.3 String类型的Refs（已过时，不推荐使用）

示例代码：

class Refs extends React.Component {constructor(props) {super(props);this.targetRef = null;this.myRef = (e) => this.targetRef = e;}componentDidMount() {console.log("this.refs" + this.refs.container);}render() {return <div ref={this.myRef}>橘猫吃不胖</div>}
}

2.4 useRef（React Hooks）

function HookRef(props) {const inputElement = useRef();return (<div><input ref={inputElement}/><button onClick={() => {inputElement.current.focus()}}>获得焦点</button></div>)
}

React属性之Refs相关推荐

React的三大属性之refs的一些简单理解
什么是refs? Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM ...
React 中的 refs
Refs Refs是什么 Refs 提供一种访问在render方法中DOM节点或者React元素的方式. Refs作用你可以通过它获得DOM节点或者React元素.一般用在处理焦点,文本选择,触发动 ...
React中的refs是用来做什么的？
refs是什么? React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render方法中创建的 React元素本质为ReactDOM.render()返回的组件实例,如果是渲染组 ...
React属性与状态
React属性与状态属性和状态作为组件之间数据流动的途径. 单向数据流单向数据流:更新 DOM 的数据总是从顶层流下来,用户事件不直接操作 DOM,而是操作顶层数据.这些数据从顶层流下来同时更新了 ...
React基础之Refs的理解与使用
目录为什么会用到Refs 何时使用Refs Refs有哪些使用方式字符串形式的refs 回调形式的refs createRef的使用为什么会用到Refs 我们在使用React写代码的时候对Ref ...
React 属性验证 propTypes
React 组件可以根据预先设置进行属性验证. React prop验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validato ...
reactjs组件实例三大属性之refs使用示例：字符串形式的ref、回调函数形式的ref、回调ref中回调执行次数的问题
1_字符串形式的ref <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
React学习（三）：通过 React 编写名片组件（React属性）
阿里云服务器0元试用,首购低至0.9元/月起 [开发云]年年都是折扣价,不用四处薅羊毛前置内容阅读 React学习(二):编写 React 组件并成功挂载效果预览: 1. 启动 my-projec ...
【React】React三大属性：Props、State、Refs
文章目录 Props State Ref Props React框架定义了一个Props的概念, 专门用来实现React组件接受参数的输入. 每个组件对象都会有props(properties的简写) ...

React属性之Refs

React属性之Refs

1 介绍

2 使用方法

2.1 createRef（版本>=React16.3）

2.2 回调Refs

2.3 String类型的Refs（已过时，不推荐使用）

2.4 useRef（React Hooks）

React属性之Refs相关推荐

最新文章

热门文章