← Back to rules

react/void-dom-elements-no-children 正确性

它的作用

禁止将子元素传递给空元素 DOM（例如 <img />、<br />）。

为什么这是不好的？

某些 HTML 元素仅支持自闭合形式（例如 img、br、hr）。这些元素统称为“空元素 DOM”。 此规则检查是否向空元素 DOM 传递了子元素。

示例

以下为 错误 代码示例：

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

以下为 正确 代码示例：

<div>Children</div>
<div children='Children' />
<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />
React.createElement('div', undefined, 'Children')
React.createElement('div', { children: '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

参考资料

• 规则源码