不推荐在ref属性中使用字符串文字

Question

我正在做反应本机代码,eslint显示行错误 ref="drawer"

[eslint]不推荐在ref属性中使用字符串文字.

什么是正确的方法来做到这一点.

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

Answer 1

您需要使用ref callback patternas 字符串refs已弃用.

<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}

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

如何在React中访问DOM元素？React中document.getElementById()的等价是什么