JSBin에서 ReactJS 프레임 워크로 놀고 있습니다.
구성 요소 이름이 소문자로 시작하면 작동하지 않습니다.
예를 들어 다음은 렌더링되지 않습니다.
var fml = React.createClass({
render: function () {
return <a href='google.com'>Go</a>
}
});
React.render(<fml />, document.body);
하지만 최대한 빨리 교체로 fml와 Fml는 렌더링 않습니다.
작은 글자로 태그를 시작할 수없는 이유가 있습니까?
답변:
JSX에서 소문자 태그 이름은 HTML 태그로 간주됩니다. 그러나 점 (속성 접근 자)이있는 소문자 태그 이름은 그렇지 않습니다.
HTML 태그와 반응 구성 요소를 참조하십시오 .
<component />React.createElement('component')(html 태그)로 컴파일<Component /> 컴파일 React.createElement(Component)<obj.component /> 컴파일 React.createElement(obj.component)let component = components[compType]; <component/>, 말도 안되는 오류가 발생했습니다.
<components[name] />어느 것도 작동하지 않는 것을 시도했습니다 .
Components대신에 호출하면 components멋진 사이트가 오류없이로드되지만 내용이로드되지 않기 때문에 이것은 n00bs에 크게 영향을 미치지 않을 수 있습니다!
@Alexandre Kirszenberg 는 매우 좋은 답변을했으며 다른 세부 사항을 추가하고 싶었습니다.
React div는 DOM 요소와 React 구성 요소를 구별하는 데 사용되는 잘 알려진 요소 이름의 화이트리스트를 포함하는 데 사용되었습니다.
그러나이 목록을 유지하는 것은 그리 재미 있지 않으며 웹 구성 요소를 통해 사용자 지정 요소를 만들 수 있기 때문에 모든 React 구성 요소는 대문자로 시작하거나 점을 포함해야합니다 .
로부터 공식 참조 반응 :
요소 유형이 소문자로 시작하면 또는 같은 내장 구성 요소를 참조하고 문자열 'div'또는 'span'이 React.createElement에 전달됩니다. compile to React.createElement (Foo)와 같이 대문자로 시작하고 JavaScript 파일에서 정의되거나 가져온 구성 요소에 해당하는 유형입니다.
또한 다음을 참고하십시오.
대문자로 구성 요소의 이름을 지정하는 것이 좋습니다. 소문자로 시작하는 구성 요소가있는 경우 JSX에서 사용하기 전에 대문자로 변수를 지정하십시오.
즉, 다음을 사용해야합니다.
const Foo = foo;fooJSX에서 Component 요소로 사용하기 전에 .
JSX태그 의 첫 번째 부분은 React 요소의 유형을 결정합니다. 기본적으로 대문자, 소문자, 점 표기법이 있습니다.
대문자와 도트 표기법 유형은 것을 나타냅니다 JSX당신이 JSX의 사용 그렇다면, 구성 요소 반작용 태그가 참조됩니다 <Foo />에 컴파일 React.createElement(Foo)
또는
<foo.bar />컴파일에 대한 React.createElement(foo.bar)정의 나 자바 스크립트 파일에서 가져온 구성 요소와 대응을.
그동안 소문자 유형 에 표시 내장과 같은 구성 요소 <div>또는 <span>과 문자열의 결과 'div'또는 'span'전달 React.createElement('div').
대문자로 구성 요소 이름을 지정하는 것이 좋습니다. 소문자로 시작하는 구성 요소가 있으면에서 사용하기 전에 대문자로 변수를 지정하십시오 JSX.