Имена компонентов ReactJS должны начинаться с заглавных букв?

Я играю с рамкой ReactJS на JSBin.

Я заметил, что если имя моего компонента начинается с строчной буквы, оно не работает.

Например, следующее не отображает:

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

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

Но как только я заменю fml на fml, он выполняет рендеринг.

Есть ли причина, по которой я не могу начинать теги с маленькими буквами?

Ответы

Ответ 1

В JSX имена тегов в нижнем регистре считаются HTML-тегами. Тем не менее, имена тегов в нижнем регистре с точкой (свойство accessor) не являются.

Смотрите HTML-теги vs React Components.

  • <component /> компилируется в React.createElement('component') (html-тег)
  • <component /> компилируется в React.createElement(Component)
  • <obj.component /> компилируется в React.createElement(obj.component)

Ответ 2

@Александр Кирзенберг дал очень хороший ответ, просто хотел добавить еще одну деталь.

React раньше содержал белый список хорошо известных имен элементов, таких как div и т.д., Которые он использовал для различения элементов DOM и компонентов React.

Но поскольку поддерживать этот список не так уж и весело, а веб-компоненты позволяют создавать собственные элементы, они сделали правилом, согласно которому все компоненты React должны начинаться с заглавной буквы или содержать точку.

Ответ 3

Из официальной ссылки React:

Когда тип элемента начинается со строчной буквы, он ссылается на встроенный компонент, такой как или, и приводит к строке 'div' или 'span', передаваемой в React.createElement. Типы, которые начинаются с заглавной буквы, такие как compile to React.createElement(Foo) и соответствуют компоненту, определенному или импортированному в вашем файле JavaScript.

Также обратите внимание, что:

Мы рекомендуем называть компоненты заглавными буквами. Если у вас есть компонент, который начинается со строчной буквы, присвойте его заглавной переменной, прежде чем использовать в JSX.

Что означает, что нужно использовать:

const Foo = foo; перед использованием foo в качестве элемента Component в JSX.

Ответ 4

Первая часть тега JSX определяет тип элемента React, в основном существует некоторое соглашение Заглавная, строчная, точка-нотация.

Типы заглавных и точечных обозначений указывают, что тег JSX относится к компоненту React,  поэтому, если вы используете компиляцию JSX <Foo /> для React.createElement(Foo)
или
<foo.bar /> скомпилировать до React.createElement(foo.bar) и соответствовать компоненту, определенному или импортированному в ваш файл JavaScript.

Пока строчный тип указывает на встроенный компонент, например <div> или <span>, и выводит строку 'div' или 'span', переданную в React.createElement('div').

Реагируйте рекомендацию именования компонентов с большой буквы. Если у вас есть компонент, начинающийся с строчной буквы,  назначьте его капитализированной переменной, прежде чем использовать ее в JSX.

Ответ 5

В JSX React Classes капитализируются для обеспечения совместимости XML, так что это не ошибочно для HTML-тега. Если классы реагирования не заглавные, это HTML-тег как предопределенный синтаксис JSX.