在 ref 属性中使用字符串字面量已被弃用。

Question

我正在使用React Native编写代码，eslint检测到ref="drawer"出现错误。

[eslint] 在ref属性中使用字符串字面量已被弃用。

正确的方法是什么？

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

- Khemraj Sharma

Answer 1

你需要利用ref回调模式，因为字符串引用已被弃用。

<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()的是什么

- Shubham Khatri

---

我对js很新，你能稍微解释一下这个语法吗？ - Khemraj Sharma

@Khemraj，这是箭头函数语法，请查看更新。 - Shubham Khatri

Answer 2

你可以用花括号将它们包裹起来，以表示它是有效的JS语法。

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

- Isaac

---

即使您添加花括号，es-lint 错误仍将显示相同。 - Tino Jose Thannippara

@TinoJoseThannippara：我很确定他们不会，但可能是因为你的代码编辑器需要一些时间来刷新。你可以尝试重新打开页面。 - Isaac

问题是询问正确解决 eslint 显示的错误的方式，而不是如何规避 eslint 规则。 - agbb