ReactJS 구성 요소 이름은 대문자로 시작해야 합니까?

ReactJS 구성 요소 이름은 대문자로 시작해야 합니까?

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')(패킷 태그)
• <Component />에 편찬하다.React.createElement(Component)
• <obj.component />에 편찬하다.React.createElement(obj.component)

@Alexandre Kirszenberg는 아주 좋은 대답을 했고, 단지 또 다른 세부사항을 덧붙이고 싶었다.

다음과 같은 잘 알려진 요소 이름의 화이트리스트를 포함하는 데 사용되는 반응divetc: DOM 요소와 React 컴포넌트를 구별하는 데 사용됩니다.

그러나 이 목록을 유지하는 것이 그리 즐거운 일은 아니며 웹 구성 요소에서 사용자 지정 요소를 만들 수 있으므로 모든 React 구성 요소는 대문자로 시작하거나 점을 포함해야 한다는 규칙을 만들었습니다.

공식 React 참조 자료:

요소 유형이 소문자로 시작하면 또는 와 같은 기본 제공 구성요소를 참조하고 문자열 'div' 또는 'span'을 React.createElement로 전달합니다.React.createElement(Foo)로 컴파일 등 대문자로 시작하는 유형으로 JavaScript 파일에서 정의 또는 Import된 구성 요소에 해당합니다.

또, 다음의 점에 주의해 주세요.

컴포넌트의 이름은 대문자로 지정하는 것이 좋습니다.소문자로 시작하는 구성 요소가 있는 경우 JSX에서 사용하기 전에 대문자로 표시된 변수에 할당하십시오.

즉, 다음을 사용해야 합니다.

const Foo = foo;사용하기 전에foo컴포넌트 요소로 사용됩니다.

의 첫 번째 부분JSXtag는 React 요소의 유형을 결정합니다.기본적으로 대문자, 소문자, 도트 표기법 등이 있습니다.

대문자와 도트 표기의 타입은, 다음과 같이 표시됩니다.JSX태그는 React 컴포넌트를 참조하고 있기 때문에 JSX를 사용하는 경우<Foo />로 컴파일하다.React.createElement(Foo)
또는
<foo.bar />로 컴파일하다.React.createElement(foo.bar)JavaScript 파일에 정의 또는 Import된 컴포넌트에 대응합니다.

소문자 유형은 다음과 같은 내장 컴포넌트를 나타냅니다.<div> ★★★★★★★★★★★★★★★★★」<span>.'div' ★★★★★★★★★★★★★★★★★」'span'에 React.createElement('div').

반응하다한 후 에서하십시오.JSX.

JSX에서는 리액트클래스는 HTML 태그로 오인되지 않도록 XML과 호환되도록 대문자로 표시됩니다.react 클래스가 대문자로 표시되지 않으면 미리 정의된 JSX 구문으로서의 HTML 태그입니다.

사용자 정의 구성 요소는 대문자로 표시되어야 합니다.

, 컴포넌트입니다. 예를 들어, 내장)를 .<div> ★★★★★★★★★★★★★★★★★」<span>어울리다'라는 됩니다.div 는 ''span'에 React.createElement. 대문자로 시작하는 타입은 다음과 같습니다.<Foo />React.createElement(Foo)JavaScript Import java java 。

반응하다한 후 에서하십시오.JSX.

예를 들어, 이 코드는 예상대로 실행되지 않습니다.

import React from 'react';

// Wrong! This is a component and should have been capitalized:
function hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}

를 해결하려면 하고 "hello"를 사용합니다.<Hello />[ ] :

import React from 'react';

// Correct! This is a component and should be capitalized:
function Hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Correct! React knows <Hello /> is a component because it's capitalized.
  return <Hello toWhat="World" />;
}

여기 참고 자료입니다

언급URL : https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters