← Back to rules

react/void-dom-elements-no-children 正しさ

An auto-fix is available for this rule.

何をするか

空のドメイン要素（例：<img />, <br />）に子要素を渡さないように制限します。

なぜ問題なのか

HTMLには閉じる必要がない（例：img, br, hr）要素がいくつか存在します。これらは総称して「空のドメイン要素」と呼ばれます。 このルールでは、空のドメイン要素に子要素が渡されていないかを確認します。

例

このルールに違反する誤りの例：

<br>子要素</br>
<br children='子要素' />
<br dangerouslySetInnerHTML={{ __html: 'HTML' }} />
React.createElement('br', undefined, '子要素')
React.createElement('br', { children: '子要素' })
React.createElement('br', { dangerouslySetInnerHTML: { __html: 'HTML' } })

このルールに準拠する正しい例：

<div>子要素</div>
<div children='子要素' />
<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />
React.createElement('div', undefined, '子要素')
React.createElement('div', { children: '子要素' })
React.createElement('div', { dangerouslySetInnerHTML: { __html: 'HTML' } })

使い方

設定ファイルまたはCLIを使ってこのルールを有効化するには、以下の方法があります：

設定 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/void-dom-elements-no-children": "error"
  }
}

CLI

oxlint --deny react/void-dom-elements-no-children --react-plugin

参照

• ルールのソース