下面这段是官方的说明,本人比较小白,有些地方不理解,请透彻理解的人帮忙解释一下
里面这段里的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,后一次是具体的组件实例。
通过
ref
获取组件实例,可以通过实例直接调用组件方法。比如题目最后就在父组件挂载后,调用了子组件
TextInput
的focus
方法c
是形参,代表该组件(TextInput
)实例,可以换成任意字符;this._input=c
,作用是组件实例赋给this._input
,以后通过this._input
就可以访问组件实例