在某些特殊情况下,直接操作组件实例的方法还是必要或者有利的。所以React提供了一个打破限制的办法,这就是refs
。refs
(reference,引用)在以下时候特别有用:当你需要直接操作一个组件渲染的DOM标记(譬如要调整它的绝对位置),或者在一个大型的非React应用中使用一个React组件,或者是把你已有的代码库在React中复用
ref回调属性
React支持一个特殊的属性,你可以把它挂到任何的组件上。这个ref
属性可以是一个回调函数,并且这个回调函数会在组件被挂载后立刻被执行。引用到的组件会被作为参数传递,这个回调函数可以立即使用组件,或者把它的引用保存起来供将来使用(又或者,两者兼有)。
你只需要给任何render
返回的东西增加一个ref属性:
render() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
}
或者使用ES6箭头函数:
render() {
return <TextInput ref={(c) => this._input = c} />;
}
componentDidMount() {
this._input.focus();
}
如果给一个DOM组件(譬如<div />
)附加ref属性,你会直接拿到DOM节点。如果给一个复合组件(如<TextInput />
)附加ref属性,你就会拿到对应的组件类的实例。在后一种情况下,你可以直接调用组件在类定义中导出的任何方法。
注意一旦引用的组件被卸载,或者ref属性本身发生了变化,旧的ref会被再次调用,此时参数为null
。这可以在你保存实例的情况下防止内存泄露。注意如果你和上文一样使用内联的函数表达式,那么React每次更新(即调用你的render
)函数时,都会看到一个不同的函数对象,这样之后每次更新时ref回调都会被调用两次:一次参数是null,后一次是具体的组件实例。