Question

我在做出反应原生代码时这样做，eslint显示行ref="drawer"

的错误

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

这是做什么的正确方法。

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

Answer 1

您需要将ref callback pattern用作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

Answer 2

你可以用大括号包装它们来表明它的有效JS语法

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

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

2 个答案: