RN 组件的ref属性怎么理解,求帮助

下面这段是官方的说明,本人比较小白,有些地方不理解,请透彻理解的人帮忙解释一下
里面这段里的c是什么, this是引用组件吗? _input 又是什么, c和input在这段代码前也并没有初始化之类的,看这段代码总觉得莫名,请理解的帮忙解释一下
return <TextInput ref={(c) => this._input = c} />;

这段是我要引用 ScrollView 的 scrollToEnd方法写的,但是不定时的会报错,报的都是scrollToEnd undefined

  <ScrollView
    ref={(scroll)=>this._scrollView = scroll}
    keyboardDismissMode='on-drag' style={{width: (DeviceWidth),height: (DeviceHeight)}}>
    <PurchaseForm callback={()=>{this._scrollView.scrollToEnd({animated: false})}} data={this.props.data}/>
  </ScrollView>

------------------------------官方说法--------------------------------
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,后一次是具体的组件实例。

阅读 5.9k
2 个回答

通过ref获取组件实例,可以通过实例直接调用组件方法。

比如题目最后就在父组件挂载后,调用了子组件TextInputfocus方法

里面这段里的c是什么, this是引用组件吗? _input 又是什么, c和input在这段代码前也并没有初始化之类的,看这段代码总觉得莫名,请理解的帮忙解释一下
return <TextInput ref={(c) => this._input = c} />;

c是形参,代表该组件(TextInput)实例,可以换成任意字符;

this._input=c,作用是组件实例赋给this._input,以后通过this._input就可以访问组件实例

新手上路,请多包涵

ref属性可以是一个回调函数,也可以是一个字符串吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题