使用refs而不是findDOMNode()去获取DOM节点.
注意: React实际上也支持使用字符串作为ref, 来访问DOM节点. 但是需要注意的是这是一种已经不被官方推荐的用法.
使用this找到DOM节点
以前的做法:
class MyComponent extends Component {
componentDidMount() {
findDOMNode(this).scrollIntoView();
}
render() {
return <div />
}
}
使用ref之后的做法
class MyComponent extends Component {
componentDidMount() {
this.node.scrollIntoView();
}
render() {
return <div ref={node => this.node = node}/>
}
}
使用字符串ref找到DOM节点
使用字符串ref的做法
class MyComponent extends Component {
componentDidMount() {
findDOMNode(this.refs.something).scrollIntoView();
}
render() {
return (
<div>
<div ref='something'/>
</div>
)
}
}
使用回调ref的做法
class MyComponent extends Component {
componentDidMount() {
this.something.scrollIntoView();
}
render() {
return (
<div>
<div ref={node => this.something = node}/>
</div>
)
}
}
调用子组件的ref
不使用ref的做法:
class Field extends Component {
render() {
return <input type='text'/>
}
}
class MyComponent extends Component {
componentDidMount() {
findDOMNode(this.refs.myInput).focus();
}
render() {
return (
<div>
Hello,
<Field ref='myInput'/>
</div>
)
}
}
使用ref的做法
class Field extends Component {
render() {
return (
<input type='text' ref={this.props.inputRef}/>
)
}
}
class MyComponent extends Component {
componentDidMount() {
this.inputNode.focus();
}
render() {
return (
<div>
Hello,
<Field inputRef={node => this.inputNode = node}/>
</div>
)
}
}
参考资料:
看完两件小事
如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：
- 把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！
- 关注公众号 「IT平头哥联盟」，公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
