react/forbid-dom-props 제한
동작 방식
이 규칙은 요소에 속성을 전달하는 것을 방지합니다. 이 규칙은 컴포넌트()가 아닌, DOM 노드(
등)에만 적용됩니다. 금지된 속성 목록은forbid 옵션을 사용하여 사용자 정의할 수 있습니다.왜 이 규칙이 필요합니까?
이 규칙은 모든 JSX 요소를 검사하고, DOM 노드에 금지된 속성이 사용되지 않았는지 확인합니다. 이 규칙은 기본적으로 비활성화되어 있습니다.
예시
이 규칙에 대해 잘못된 코드 예시:
jsx
// [1, { "forbid": ["id"] }]
<div id='Joe' />
// [1, { "forbid": ["style"] }]
<div style={{color: 'red'}} />이 규칙에 대해 올바른 코드 예시:
jsx
// [1, { "forbid": ["id"] }]
<Hello id='foo' />
// [1, { "forbid": ["id"] }]
<Hello id={{color: 'red'}} />구성 방법
forbid-dom-props 규칙에 대한 구성 설정입니다.
이 규칙은 다음 속성을 가진 구성 객체를 수락합니다.
forbid
type: array
DOM 요소에서 금지되는 속성 이름 또는 객체의 배열입니다.
각 배열 요소는 속성 이름을 나타내는 문자열이거나, propName, 선택적 disallowedFor 배열(금지 대상인 DOM 노드 이름), 그리고 선택적 사용자 지정 message를 포함하는 객체일 수 있습니다.
예시:
["error", { "forbid": ["id", "style"] }]["error", { "forbid": [{ "propName": "className", "message": "class를 사용하세요" }] }]["error", { "forbid": [{ "propName": "style", "disallowedFor": ["div", "span"] }] }]
forbid[n]
type: string
단순한 속성 이름 문자열로 지정하거나, 옵션을 함께 사용해 금지된 속성입니다.
사용 방법
구성 파일 또는 명령줄 인터페이스를 통해 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:
json
{
"plugins": ["react"],
"rules": {
"react/forbid-dom-props": "error"
}
}bash
oxlint --deny react/forbid-dom-props --react-plugin