← Back to rules

react/forbid-elements 제한

작동 방식

금지할 요소 목록을 구성하고, 해당 요소의 대체 요소를 지정할 수 있도록 합니다.

왜 문제인가요?

특정 요소 사용을 금지하고 다른 요소로 대체하고 싶을 수 있습니다. 예를 들어, 모든 <div /> 사용을 금지하고 <Box /> 사용으로 대체하는 경우입니다.

예시

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

// ["error", { "forbid": ["button"] }]
<button />;
React.createElement("button");

// ["error", { "forbid": ["Modal"] }]
<Modal />;
React.createElement(Modal);

// ["error", { "forbid": ["Namespaced.Element"] }]
<Namespaced.Element />;
React.createElement(Namespaced.Element);

// ["error", { "forbid": [{ "element": "button", "message": "use <Button> instead" }, "input"] }]
<div>
  <button />
  <input />
</div>;
React.createElement("div", {}, React.createElement("button", {}, React.createElement("input")));

이 규칙에 대한 올바른 코드 예시:

// ["error", { "forbid": ["button"] }]
<Button />

// ["error", { "forbid": [{ "element": "button" }] }]
<Button />

구성

이 규칙은 다음 속성을 가진 구성 객체를 수용합니다.

forbid

type: array

금지할 요소 목록이며, 린트 위반 시 표시할 메시지가 옵션으로 포함될 수 있습니다.

예시:

• ["error, { "forbid": ["button"] }]
• ["error, { "forbid": [{ "element": "button", "message": "Use <Button> instead." }] }]
• ["error, { "forbid": [{ "element": "input" }] }]

forbid[n]

type: object | string

단순한 요소 이름 또는 사용자 정의 메시지와 함께 금지된 요소입니다.

forbid[n].element

type: string

forbid[n].message

type: string

사용 방법

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/forbid-elements": "error"
  }
}

CLI

oxlint --deny react/forbid-elements --react-plugin

참고 자료

• 규칙 소스