使用refs而不是findDOMNode()去获取DOM节点.

注意:
React实际上也支持使用字符串作为ref, 来访问DOM节点. 但是需要注意的是这是一种已经不被官方推荐的用法.

使用this找到DOM节点
以前的做法:
  1. class MyComponent extends Component {
  2.   componentDidMount() {
  3.     findDOMNode(this).scrollIntoView();
  4.   }
  6.   render() {
  7.     return <div />
  8.   }
  9. }
使用ref之后的做法
  1. class MyComponent extends Component {
  2.   componentDidMount() {
  3.     this.node.scrollIntoView();
  4.   }
  6.   render() {
  7.     return <div ref={node => this.node = node}/>
  8.   }
  9. }
使用字符串ref找到DOM节点
使用字符串ref的做法
  1. class MyComponent extends Component {
  2.   componentDidMount() {
  3.     findDOMNode(this.refs.something).scrollIntoView();
  4.   }
  6.   render() {
  7.     return (
  8.       <div>
  9.         <div ref='something'/>
  10.       </div>
  11.     )
  12.   }
  13. }
使用回调ref的做法
  1. class MyComponent extends Component {
  2.   componentDidMount() {
  3.     this.something.scrollIntoView();
  4.   }
  6.   render() {
  7.     return (
  8.       <div>
  9.         <div ref={node => this.something = node}/>
  10.       </div>
  11.     )
  12.   }
  13. }
调用子组件的ref
不使用ref的做法:
  1. class Field extends Component {
  2.   render() {
  3.     return <input type='text'/>
  4.   }
  5. }
  7. class MyComponent extends Component {
  8.   componentDidMount() {
  9.     findDOMNode(this.refs.myInput).focus();
  10.   }
  12.   render() {
  13.     return (
  14.       <div>
  15.         Hello,
  16.         <Field ref='myInput'/>
  17.       </div>
  18.     )
  19.   }
  20. }
使用ref的做法
  1. class Field extends Component {
  2.   render() {
  3.     return (
  4.       <input type='text' ref={this.props.inputRef}/>
  5.     )
  6.   }
  7. }
  9. class MyComponent extends Component {
  10.   componentDidMount() {
  11.     this.inputNode.focus();
  12.   }
  14.   render() {
  15.     return (
  16.       <div>
  17.         Hello,
  18.         <Field inputRef={node => this.inputNode = node}/>
  19.       </div>
  20.     )
  21.   }
  22. }

参考资料: