React 16이 속성을 DOM으로 전달할 수 있음을 확인했습니다. 따라서 className 대신 'class'를 사용할 수 있습니다.
이전 버전의 React와 역 호환되는 것 외에도 className을 클래스보다 사용하는 것이 장점이 있는지 궁금합니다.
React 16이 속성을 DOM으로 전달할 수 있음을 확인했습니다. 따라서 className 대신 'class'를 사용할 수 있습니다.
이전 버전의 React와 역 호환되는 것 외에도 className을 클래스보다 사용하는 것이 장점이 있는지 궁금합니다.
답변:
class는 javascript의 키워드이고 JSX는 javascript의 확장입니다. 즉 사용 반작용 왜 주요 이유 className대신을 class.
그 점에서 변한 것은 없습니다.
이것을 조금 더 확장하려면. 키워드 수단 토큰은 언어 구문에서 특별한 의미를 가지고있다. 예를 들면 다음과 같습니다.
class MyClass extends React.Class {
토큰 class은 다음 토큰이 식별자이고 다음은 클래스 선언임을 나타냅니다. Javascript 키워드 + 예약어를 참조하십시오 .
토큰이 키워드라는 사실은 일부 표현식에서 사용할 수 없음을 의미합니다.
// invalid in older versions on Javascript, valid in modern javascript
const props = {
class: 'css class'
}
// valid in all versions of Javascript
const props = {
'class': 'css class'
};
// invalid!
var class = 'css';
// valid
var clazz = 'css';
// invalid!
props.class = 'css';
// valid
props['class'] = 'css';
문제 중 하나는 미래에 다른 문제가 발생하지 않을지 아무도 알 수 없다는 것입니다. 모든 프로그래밍 언어는 여전히 진화하고 class있으며 실제로 충돌하는 새로운 구문에서 사용될 수 있습니다.
에는 이러한 문제가 없습니다 className.
props.class = 'css' 이것은 완전히 유효합니다
React 팀은 실제로 다가오는 미래 ( source ) class 대신 다음 으로 전환 할 것입니다 .className
className→class( # 4331 , 아래 # 13525 (주석) 참조). 이것은 수없이 제안되었습니다. 우리는 이미 React 16의 DOM 노드에 클래스를 전달하는 것을 허용하고 있습니다. 이것이 생성하는 혼란은 보호하려는 구문 제한의 가치가 없습니다.
전환하고 둘 다 지원하지 않는 이유는 무엇입니까?
경고없이 두 가지를 모두 지원하면 커뮤니티가 어느 것을 사용할지 분할됩니다. class prop을받는 npm의 각 구성 요소는 둘 다 전달해야합니다. 중간에 심지어 하나의 구성 요소가 하나 개의 소품을 연주하고 구현하지 않는 경우, 클래스는 분실 - 또는 당신과 함께 끝나는 위험이
class와className그 충돌을 해결에 반응위한 방법으로, 서로 "의견이 맞지"아래에. 그래서 우리는 그것이 현상 유지보다 더 나쁠 것이라고 생각하고 이것을 피하고 싶습니다.
따라서 계속 지켜봐주십시오. 이것이 API가 기대하는 한
계속 사용할 것 className입니다.
class키워드이기 때문에 많은 표현에서 사용할 수 없다는 것을 깨달았습니다 .
이미 주어진 다른 좋은 답변들 위에 조금 더 빛을 비추기 위해 :
React가 전통적인 DOM 클래스 대신 className을 사용한다는 것을 알 수 있습니다. 문서에서 "JSX는 JavaScript이므로 class 및 for와 같은 식별자는 XML 속성 이름으로 사용하지 않는 것이 좋습니다. 대신 React DOM 구성 요소는 각각 className 및 htmlFor와 같은 DOM 속성 이름을 기대합니다."
http://buildwithreact.com/tutorial/jsx
또한 zpao (React 기여자 / 페이스 북 직원) 를 인용합니다.
DOM 구성 요소는 (대부분) JS API를 사용하므로 JS 속성 (node.class가 아닌 node.className)을 사용하도록 선택했습니다.
React 문서 cannonical React attribute는 일반적인 Javascript 이름 지정 대신 이름 을 사용하도록 권장 하므로 React가 속성을 DOM으로 전달할 수있는 경우에도 경고를 표시합니다.
로부터 문서 :
Known attributes with a different canonical React name:
<div tabindex="-1" />
<div class="hi" />
React 15: Warns and ignores them.
React 16: Warns but converts values to strings and passes them through.
Note: always use the canonical React naming for all supported attributes.
2019 년 6 월 부로 className을 class로 변경하는 과정이 중단되어 추후 계속 될 수 있습니다.
여기에 페이스 북 개발자의 게시물이 이유를 설명합니다
ReactJS에서 우리는 모두 알고 있듯이 HTML이 아닌 JSX를 다루고 있습니다. JSX는 기본 자바 스크립트 DOM API이기 때문에 className을 사용하기를 원합니다! 클래스가 JS에서 예약 된 키워드 인 것은 우리가 className을 사용하지 않고 대신 클래스를 사용하는 주된 이유가 아닙니다. DOM API를 참조하기 때문입니다.