使用Ref进行DOM操作
原因
React.js 并不能完全满足所有 DOM 操作需求,有些时候我们还是需要和 DOM 打交道。比如说想动态获取某个 DOM 元素的尺寸来做后续的动画等。
使用方法
class AutoFocusInput extends Component {
componentDidMount () {
this.input.focus()
}render () {
return (
this.input = input} />
)
}
}ReactDOM.render(
,
document.getElementById('root')
)
可以看到给 input 元素加了一个 ref 属性,这个属性值是一个函数。当 input 元素在页面上挂载完成以后,React.js 就会调用这个函数,并且把这个挂载以后的 DOM 节点传给这个函数
使用原则 【使用Ref进行DOM操作】能不用 ref 就不用
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页,计算网页数据大小