경고 : 알 수없는 DOM 속성 클래스입니다. className을 의미 했습니까?

113

방금 간단한 렌더링 기능이있는 구성 요소를 추가하여 React를 탐색하기 시작했습니다.

render() {
  return <div class="myApp"></div>
}

앱을 실행할 때 다음과 같은 오류가 발생합니다.

Warning: Unknown DOM property class. Did you mean className?

나는 변경하여이 문제를 해결 할 수 있습니다 class로 className.

질문은 ~이야; React는이 규칙을 시행합니까? 또한 왜 className기존 대신 사용해야 class합니까? 이것이 제한이라면 JSX 구문 때문입니까 아니면 다른 곳입니까?

javascript reactjs react-jsx

— Jsalonen
소스

150

예, React 규칙입니다.

JSX는 JavaScript이므로 class및 같은 식별자 for는 XML 속성 이름으로 사용하지 않는 것이 좋습니다. 대신, DOM 구성 요소가 같은 DOM 속성 이름을 기대 반작용 className과 htmlFor각각.

JSX 심층 .

— 비아체슬라프
소스

9

나는 이것이 매우 직관적이지 않다는 것을 안다. 나는 파서가 컨텍스트를 기반으로 두 언어간에 컨텍스트를 전환하는 방법을 알고 있어야하며 프로그래머와 도구에 대한 부담을 덜어 야한다고 생각합니다

— Jonathan

13

Meteor는 바벨을 사용하여 ES5를 ES6 (ES2015)로 트랜스 파일하므로 바벨 트랜스 파일러가 추가 된 일반 노드 애플리케이션으로 처리 할 수 있습니다.

.babelrc프로젝트의 루트 폴더 에 파일을 추가하고 다음 항목을 추가해야합니다.

{
  "plugins": [
    "react-html-attrs"
  ]
}

물론 다음을 사용하여이 플러그인을 설치해야합니다 npm.

npm 설치 --save-dev babel-plugin-react-html-attrs

— 안전한
소스

감사합니다. react-facebook-login을 설치 한 후 "Invalid DOM"을 수정할 수 있습니다.

— Kakashi

12

React.js에는 사용 가능한 for 및 클래스 속성이 없으므로 다음을 사용해야합니다.

for   --> htmlFor
class --> className

— KARTHIKEYAN.A
소스

4

JS에는 클래스의 또 다른 의미가 있기 때문에 HTML 태그 속성에 클래스를 사용할 수 없습니다. 그렇기 때문에 class 대신 className을 사용해야합니다.

또한 for 대신 htmlFor 속성을 사용하십시오.

— 님미 베르 마
소스

3

HTML에서 우리는

class="navbar"

하지만 React와 ReactNative에는 HTML이 없습니다. 여기서는 JSX (Javascript XML)를 사용합니다.

className="navbar"

— 무하마드 탈하
소스

0

babel을 사용하여 컴파일 된 JSX 구문은 HTML 요소를 만드는 데 사용할 기본 구문은 다음과 같습니다.

   React.createElement('div', {attributes}, "Hello");

className 대신 클래스를 사용하면 반응은이를 html 클래스 속성 대신 자바 스크립트 클래스로 추론합니다. [변수 명 'class'가 이미 파일에서 자바 스크립트 클래스를 생성하는 데 사용되고 동일한 목적으로 예약 된 이유]. javascript 클래스는 html DOM 요소에 대한 유효한 속성이 아니기 때문에 잘못되고 컴파일러에서 오류가 발생합니다.

   React.createElement("p", {"class": "header"}, "Hello");

따라서 class 대신 className을 사용해야합니다.

   React.createElement("p", {"className": "header"}, "Hello")

— Sasi Kumar 남
소스