react16中ref的使用

在 React16 新版本中，新引入了 React.createRef 与 React.forwardRef 两个 API，有计划移除老的 string ref，使 ref 的使用更加便捷与明确。如果你的应用已经升级到 React16.3+ 版本，那就放心大胆使用 React.createRef 吧，如果暂时没有的话，建议使用 callback ref 来代替 string ref。

string ref 使用

class MyComponent extends React.Component {componentDidMount() {this.refs.myRef.focus();}render() {return <input ref="myRef" />;}
}

callback ref 使用

class MyComponent extends React.Component {componentDidMount() {this.myRef.focus();}render() {return <input ref={(ele) => {this.myRef = ele;}} />;}
}

React.createRef 使用

class MyComponent extends React.Component {constructor(props) {super(props);this.myRef = React.createRef();}componentDidMount() {this.myRef.current.focus();}render() {return <input ref={this.myRef} />;}
}

react16中ref的使用相关推荐

Spring中ref local与ref bean区别
为什么80%的码农都做不了架构师?>>> Spring中ref local与ref bean区别今天在做SSH框架Demo实例时,在ApplicationResources. ...
react 子组件ref_React中Ref 的使用方法详解
本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯 ...
React中ref的使用方法
React中ref的使用方法在react典型的数据流中, props 传递是父子组件交互的唯一方式:通过传递一个新的 props 值来使子组件重新 re-render ,从而达到父子组件通信.当然, ...
C#中ref和out的使用小结
C#中ref和out的使用小结 ref是传递参数的地址,out是返回值,两者有一定的相同之处,不过也有不同点. 使用ref前必须对变量赋值,out不用. out的函数会清空变量,即使变量已经赋值也不行 ...
vue中ref 的使用
在vue 中 ref 和 refs 的使用: <ul ref="ul" class="his-list listItem" style="pa ...
C#中ref和out关键字的应用以及区别。
C#中ref和out关键字的应用以及区别. ref ref的定义 ref 的使用 out out的定义:来自MSDN out的用法 ref和out的区别 Stack Overflow的解释: 之前要学 ...
c#中ref和out的区别
c#中ref和out的区别: 1,ref必须初始化,out不用初始化. 2,ref参数的值被传递到ref参数,out不能被传递. 注意: 1,属性不是变量,不能作为ref参数传递. 2,ref类似于c ...
react中ref、createRef、React.forwardRef分别是什么？如何使用？
一.react中ref.createRef.React.forwardRef (1)Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧.对于大多数应用中的组件来说,这通常不是必需的.但 ...
vue2 中 ref 的使用
ref 是什么 ref 被用来给DOM元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素: 如果用在子组件上,引 ...

react16中ref的使用

react16中ref的使用相关推荐

最新文章

热门文章