경고:알 수 없는 DOM 속성 클래스입니다.className을 말하는 건가요?

경고:알 수 없는 DOM 속성 클래스입니다.className을 말하는 건가요?

간단한 렌더링 기능이 있는 컴포넌트를 추가하여 React에 대해 알아보는 중입니다.

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

앱을 실행하면 다음 오류가 나타납니다.

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

이것을 바꾸면 해결할 수 있다.class로.className.

문제는 React가 이 규칙을 시행하느냐는 것입니다.또, 왜, 이 기능을 사용할 필요가 있나요?className종래의 것이 아니라class이것이 제한사항이라면 JSX 구문 때문인가요 아니면 다른 곳 때문인가요?

네, 리액트 규칙입니다.

JSX는 JavaScript이므로 다음과 같은 식별자가 있습니다.class그리고.for는 XML Atribute 이름으로 권장되지 않습니다.대신 React DOM 컴포넌트는 다음과 같은 DOM 속성 이름을 요구합니다.className그리고.htmlFor,각각 다음과 같다.

JSX 상세

React.js에는 및 클래스 속성을 사용할 수 없기 때문에 를 사용해야 합니다.

for   --> htmlFor
class --> className

Meteor는 babel을 사용하여 ES5를 ES6(ES2015)로 변환하므로 babel 트랜스필러가 추가되어 일반 Node 어플리케이션으로 처리할 수 있습니다.

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

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

물론 이 플러그인은 다음 방법으로 설치해야 합니다.npm:

npm install --save-dev babel-syslog-syslog-attrs

HTML에서는 사용

class="navbar"

그러나 React와 ReactNative에는 HTML이 없으며 여기서는 JSX(Javascript XML)를 사용합니다.

className="navbar"

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

또한 for 대신 htmlFor 속성을 사용합니다.

react 16.13.1에서는 클래스 속성을 사용할 수 있습니다."경고" 예외가 발생하지만 실행을 중지하지는 않습니다.

Babel을 사용하여 컴파일할 경우 HTML 요소를 작성하기 위해 사용되는 기본 구문은 다음과 같습니다.

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

className 대신 클래스를 사용하면 html 클래스 속성이 아닌 javascript 클래스로 추론됩니다.[변수명 'class'가 이미 javascript 클래스를 만들기 위해 사용되고 있으며 동일한 용도로 예약되어 있는 이유]javascript 클래스는 html DOM 요소의 유효한 속성이 아니기 때문에 이는 잘못된 것이며 컴파일러는 오류를 발생시킵니다.

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

따라서 클래스 대신 className을 사용해야 합니다.

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

언급URL : https://stackoverflow.com/questions/30968113/warning-unknown-dom-property-class-did-you-mean-classname