ReactJS 組件名稱必須以大寫字母開頭嗎？

Question

我正在JSBin上使用 ReactJS 框架。

我注意到如果我的組件名稱以小寫字母開頭，則它不起作用。

例如，以下不呈現：

var fml = React.createClass({
  render: function () {
    return <a href='google.com'>Go</a>
  }
});

React.render(<fml />, document.body);

但是一旦我用Fml替換fml它就會渲染。

有什么原因我不能用小寫字母開始標簽嗎？

Answer 1

在 JSX 中，小寫的標簽名稱被認為是 HTML 標簽。 但是，帶有點（屬性訪問器）的小寫標記名稱不是。

請參閱HTML 標簽與 React 組件。

• <component />編譯為React.createElement('component') (html 標簽)
• <Component />編譯為React.createElement(Component)
• <obj.component />編譯為React.createElement(obj.component)

Answer 2

@Alexandre Kirszenberg給出了一個很好的答案，只是想添加另一個細節。

React 曾經包含一個眾所周知的元素名稱（如div等）的白名單，用於區分 DOM 元素和 React 組件。

但是因為維護這個列表並不是那么有趣，而且因為 Web 組件可以創建自定義元素，所以他們制定了一個規則，所有 React 組件必須以大寫字母開頭，或者包含一個點。

Answer 3

從官方反應參考：

當元素類型以小寫字母開頭時，它指的是一個內置組件，如或，並導致傳遞給 React.createElement 的字符串“div”或“span”。 以大寫字母開頭的類型，例如 compile to React.createElement(Foo) 並對應於在 JavaScript 文件中定義或導入的組件。

另請注意：

我們建議使用大寫字母命名組件。 如果您確實有一個以小寫字母開頭的組件，請在將其用於 JSX 之前將其分配給一個大寫的變量。

這意味着必須使用：

const Foo = foo; 在使用foo作為 JSX 中的 Component 元素之前。

Answer 4

JSX標簽的第一部分決定了 React 元素的類型，基本上有一些約定大寫、小寫、點符號。

大寫和點符號類型表示JSX標記指的是 React 組件，因此如果您使用 JSX <Foo />編譯為React.createElement(Foo)
或者
<foo.bar />編譯為React.createElement(foo.bar)並對應於 JavaScript 文件中定義或導入的組件。

而小寫類型表示像<div>或<span>這樣的內置組件，並導致傳遞給React.createElement('div')的字符串'div'或'span' 。

React 建議使用大寫字母命名組件。 如果您確實有一個以小寫字母開頭的組件，請在將其用於JSX之前將其分配給一個大寫的變量。

Answer 5

在 JSX 中，React 類被大寫以使 XML 兼容，因此不會被誤認為是 HTML 標簽。 如果 react 類沒有大寫，則它是一個 HTML 標記，作為預定義的 JSX 語法。

Answer 6

用戶定義的組件必須大寫

當元素類型以小寫字母開頭時，它指的是像<div>或<span>這樣的內置組件，並導致傳遞給React.createElement的字符串“ div ”或'span' 。 以大寫字母開頭的類型如<Foo />編譯為React.createElement(Foo)並對應於在 JavaScript 文件中定義或導入的組件。

React 建議使用大寫字母命名組件。 如果您確實有一個以小寫字母開頭的組件，請在將其用於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 並在引用它時使用<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" />;
}

這是參考