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

✅ 此規則預設為開啟。

作用

禁止 void DOM 元素 (例如 <img />, <br />) 接收子元素。

為什麼這不好？

有些 HTML 元素是僅能自閉合的 (例如 img、br、hr)。這些元素統稱為 void DOM 元素。此規則會檢查是否將子元素傳遞給 void 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' } })

參考資料

• 規則來源