Использование строковых литералов в атрибутах ref не рекомендуется

Question

Я делаю это в собственном коде реагирования, eslint показывает ошибку для строки ref="drawer"

[eslint] Использование строковых литералов в атрибутах ref не рекомендуется.

Как правильно это сделать.

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

Answer 1

Вы можете заключить их в фигурные скобки, чтобы указать, что это правильный синтаксис JS

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

Answer 2

Вам необходимо использовать ref callback pattern, поскольку ссылки на строки устарели.

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

Проверьте этот ответ для получения дополнительной информации

Как получить доступ к элементу DOM в React?Что эквивалентно document.getElementById () в React