← Back to rules

react/no-children-prop 정확성

작동 방식

자식을 속성(prop)을 통해 전달하는지 확인합니다.

왜 문제가 되는가?

자식은 항상 실제 자식이어야 하며, 속성을 통해 전달되어서는 안 됩니다. JSX를 사용할 때는 자식을 열리는 태그와 닫히는 태그 사이에 중첩해야 합니다. JSX를 사용하지 않을 경우, 자식은 React.createElement에 추가 인수로 전달되어야 합니다.

예시

이 규칙에 부적절한 코드 예시:

<div children='Children' />

<MyComponent children={<AnotherComponent />} />
<MyComponent children={['Child 1', 'Child 2']} />
React.createElement("div", { children: 'Children' })

이 규칙에 적절한 코드 예시:

<div>Children</div>
<MyComponent>Children</MyComponent>

<MyComponent>
  <span>Child 1</span>
  <span>Child 2</span>
</MyComponent>

React.createElement("div", {}, 'Children')
React.createElement("div", 'Child 1', 'Child 2')

사용 방법

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

구성 파일 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-children-prop": "error"
  }
}

CLI

oxlint --deny react/no-children-prop --react-plugin

참고 자료

• 규칙 소스