React 支持一种异常特别的属性 Ref ，你能够用来绑定到 render() 输出的任何组件上。

• ref : 绑定属性

• refs : 挪用的时刻运用

挪用子组件要领

这是一个很奇异的要领refs，它能够挪用子组件的要领以及属性。下面用一个例子来完成挪用子组件要领。

竖立组件

竖立子组件MyComponent.js，并在子组件完成一个要领，如:subHandleClick，这个要领完成变动当前组件上面的文本，供应如许一个测试用例。

运用子组件

经由过程import SubComponent from './SubComponent'来援用子组件SubComponent，在 render要领中注册运用组件

render(){
  return(
    <SubComponent/>
  )
}

绑定ref属性

在子组件挪用上面绑定一个值为subcomponents的属性ref，subcomponents

<SubComponent ref="subcomponents" />

挪用子组件要领

在进口父组件App.js中，增加要领handleClick，去挪用子组件SubComponent.js中的subHandleClick要领

handleClick(){
  //this.refs.subcomponents能够接见子组件的要领
  //也能够猎取子组件的state...
  this.refs.subcomponents.subHandleClick();
}

完全实例

进口父组件App.js

import React, { Component } from 'react';
import SubComponent from './SubComponent'
class MyComponent extends Component {
  handleClick(){
    this.refs.subcomponents.subHandleClick();
  }
  render(){
    return(
      <div>
        <input
          type="button"
          value="点我挪用子组件要领"
          onClick={this.handleClick.bind(this)}
        />
        <SubComponent ref="subcomponents" />
      </div>
    )
  }
}

ReactDOM.render(
  <MyComponent/>, 
  document.querySelector('#app')
);

子组件SubComponent.js

import React, { Component } from 'react';
export default class SubComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '这里是初始化文本'
    };
  }
  subHandleClick(){
    this.setState({text: '文本被转变啦！哈哈！'})
  }
  render(){
    return(
      <div>
        检察：{this.state.text}
      </div>
    )
  }
}

接见父组件要领

父组件Parent.js

class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
     value:""
    }
  }
  refresh(){
    // 这里箭头函数很主要
    return ()=>{
        this.setState({value:"这里是子组件挪用的要领"})
    }
  }
  render(){
    return (
      <div>
        <h2>兄弟组件沟通</h2>
        <Brother refresh={this.refresh()}/>
        <p>{this.state.value}</p>
      </div>
    )
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'));

子组件SubComponent.js

import React, { Component } from 'react';
export default class SubComponent extends Component {
  constructor(props) {
    super(props);
  }
  subHandleClick(){
    this.setState({text: '文本被转变啦！哈哈！'})
  }
  render(){
    return(
      <div>
        <button onClick={this.props.refresh}>
            更新父组件
        </button>
      </div>
    )
  }
}

猎取DOM实例

经由过程ref属性，你可猎取，实例中的属性要领，以至能够经由过程他猎取到DOM实例节点this.refs.myInput.getDOMNode()

ref 属性绑定

<input type="text" ref="myInput" />

refs 猎取DOM实例

猎取支持实例（ backing instance ）。如许就能够确保在任何时候老是拿到准确的实例。

// 输入框猎取核心
this.refs.myInput.focus()

完全实例

import React, { Component } from 'react';
class MyComponent extends Component {
  handleClick(){
    this.refs.myInput.focus();
  }
  render(){
    return(
      <div>
        <input 
          type="text" 
          ref="myInput" 
        />
        <input
          type="button"
          value="点我输入框猎取核心"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    )
  }
}

ReactDOM.render(
  <MyComponent/>, 
  document.querySelector('#app')
);