javascript - 在 ref 属性中使用字符串文字已被弃用

Question

我在 React native 代码中执行此操作，eslint 显示行 ref="drawer"

错误

[eslint] Using string literals in ref attributes is deprecated.

执行此操作的正确方法是什么。

<DrawerLayoutAndroid
                drawerWidth={300}
                ref="drawer"
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                renderNavigationView={() => navigationView}
            </DrawerLayoutAndroid>

Answer 1

您需要使用ref 回调模式 作为string refs are deprecated.

<DrawerLayoutAndroid
            drawerWidth={300}
            ref={(ref) => this.drawer = ref}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => navigationView}
        </DrawerLayoutAndroid>

(ref) => this.drawer = ref 是一个箭头函数语法，你可以简化成类似

constructor(props) {
   super(props); 
   this.setRef = this.setRef.bind(this);
}
setRef(ref) {
   this.setRef = ref;
}

...
ref={this.setRef}

查看此答案以获取更多信息

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React