在 jsx 中禁用 eslint 错误

Question

我的一个反应本机组件中有以下 JSX

        <TouchableOpacity onPress={this.onEnableNotifications} style={{marginHorizontal: 10}}>
          <Image source={require('../../img/ic_warning.png')} style={{tintColor: colorThemes.Blue.red}}/>
        </TouchableOpacity>

我收到以下 ESLint 错误：

'require' is not defined. (no-undef)

我尝试在 Image 之后添加行 { // eslint-disable-line no-undef } 但这会导致解析错误。我怎样才能摆脱那一行的这个错误。

Answer 1

我读过一些 jsx quirks 所以试着把它分开：

<TouchableOpacity onPress={this.onEnableNotifications} style={{marginHorizontal: 10}}>
  <Image
    source={require('../../img/ic_warning.png')} // eslint-disable-line no-undef
    style={{tintColor: colorThemes.Blue.red}}
  />
</TouchableOpacity>

或者你可以在上面定义。

const warningImage = require('../../img/ic_warning.png'); // eslint-disable-line no-undef

....

<TouchableOpacity onPress={this.onEnableNotifications} style={{marginHorizontal: 10}}>
  <Image source={warningImage} style={{tintColor: colorThemes.Blue.red}}/>
</TouchableOpacity>

如果这是一个静态路径，我会完全在 react class/function 之外定义它，作为导入。

Answer 2

在您的 .eslintrc 文件中：

{
    "globals":{
        "require": true
    }
}

Answer 3

为了在 jsx 中使用注释禁用 eslint 警告，请使用

{ /* eslint-disable no-undef */ }
     <div>element causing warning </div>
{ /* eslint-enable no-undef */ }

单行注释不起作用：

{ /* eslint-disable-line no-undef */ }

另见

https://github.com/eslint/eslint/issues/7030

Answer 4

要禁用属性上的 eslint 规则，您可以使用内联注释：

<StatusBar
  // eslint-disable-next-line react/style-prop-object
  style='light'
/>

在 jsx 中禁用 eslint 错误

Disable eslint error in jsx

reactjs

react-native

react-jsx

eslint