← Back to rules

react/void-dom-elements-no-children 정확성

작동 방식

비어 있는 DOM 요소(예: <img />, <br />)에 자식 요소를 전달하는 것을 금지합니다.

왜 문제가 되는가?

일부 HTML 요소는 단지 자가 닫힘 형태로만 존재합니다(예: img, br, hr). 이러한 요소들은 종합적으로 '비어 있는 DOM 요소'라고 불립니다. 이 규칙은 비어 있는 DOM 요소에 자식을 전달하지 않도록 확인합니다.

예시

이 규칙에 대해 잘못된 코드 예시:

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

사용 방법

구성 파일 또는 명령줄 인터페이스에서 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:

설정 (.oxlintrc.json)

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

CLI

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

참고 항목

• 규칙 소스