内容简介:理解:通过指定ref获得你想操作的元素,然后进行修改<input ref="myInput" />回调函数将接收当前的DOM元素作为参数,然后存储一个指向这个DOM元素的引用。那么在示例代码中,我们已经把input元素存储在了this.textInput中,在focus函数中直接使用原生DOM API实现focus聚焦。
React ref
理解:通过指定ref获得你想操作的元素,然后进行修改
string 使用方法
<input ref="myInput" />
var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.getBoundingClientRect();
ref作为回调函数的方式去使用
class Input extends Component { constructor(props){ super(props); } focus = () => { this.textInput.focus(); } render(){ return ( <div> <input ref={(input) => { this.textInput = input }} /> </div> ) } }
input参数是哪来的
回调函数将接收当前的DOM元素作为参数,然后存储一个指向这个DOM元素的引用。那么在示例代码中,我们已经把input元素存储在了this.textInput中,在focus函数中直接使用原生DOM API实现focus聚焦。
回调函数什么时候被调用
答案是当组件挂载后和卸载后,以及ref属性本身发生变化时,回调函数就会被调用。
不能在无状态组件中使用ref
理解:class组件-对象组件-有实例 无状态组件-函数组件-无实例
上代码:
function MyFunctionalComponent() { return <input />; } class Parent extends React.Component { render() { return ( <MyFunctionalComponent ref={(input) => { this.textInput = input; }} /> ); } }
父组件的ref回调函数可以使用子组件的DOM。
function CustomTextInput(props) { return ( <div> <input ref={props.inputRef} /> </div> ); } class Parent extends React.Component { render() { return ( <CustomTextInput inputRef={el => this.inputElement = el} /> ); } }
原理就是父组件把ref的回调函数当做inputRefprops传递给子组件,然后子组件<CustomTextInput>把这个函数和当前的DOM绑定,最终的结果是父组件<Parent>的this.inputElement存储的DOM是子组件<CustomTextInput>中的input。
同样的道理,如果A组件是B组件的父组件,B组件是C组件的父组件,那么可用上面的方法,让A组件拿到C组件的DOM。
理念
Facebook非常不推荐会打破组件的封装性的做法,多级调用确实不雅,需要考虑其他更好的方案去优化
以上所述就是小编给大家介绍的《React的ref是啥?强力一波》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 强力推荐!.NET开发的这23种优秀工具
- 云资讯 高性能计算——数据大爆发时代的强力引擎
- 给 Swagger-Bootstrap-UI 加一个强力功能
- 高效文本标注工具如何成为 NLP 发展的强力助推器?
- 重磅发布:最新产品发布强力扩展 MongoDB 数据领导力
- Python升级3.6 强力Django+杀手级Xadmin打造在线教育平台 (完整重制版)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
高扩展性网站的50条原则
[美] Martin L. Abbott、[美]Michael T. Fisher / 张欣、杨海玲 / 人民邮电出版社 / 2012-6-3 / 35.00元
《高扩展性网站的50条原则》给出了设计高扩展网站的50条原则,如不要过度设计、设计时就考虑扩展性、把方案简化3倍以上、减少DNS查找、尽可能减少对象等,每个原则都与不同的主题绑定在一起。大部分原则是面向技术的,只有少量原则解决的是与关键习惯和方法有关的问题,当然,每个原则都对构建可扩展的产品至关重要。 主要内容包括: 通过克隆、复制、分离功能和拆分数据集提高网站扩展性; 采用横向......一起来看看 《高扩展性网站的50条原则》 这本书的介绍吧!