Я играю с рамкой ReactJS на JSBin.
Я заметил, что если имя моего компонента начинается с строчной буквы, оно не работает.
Например, следующее не отображает:
var fml = React.createClass({
render: function () {
return <a href='google.com'>Go</a>
}
});
React.render(<fml />, document.body);
Но как только я заменю fml на fml, он выполняет рендеринг.
Есть ли причина, по которой я не могу начинать теги с маленькими буквами?
В JSX имена тегов в нижнем регистре считаются HTML-тегами. Тем не менее, имена тегов в нижнем регистре с точкой (свойство accessor) не являются.
Смотрите HTML-теги vs React Components.
<component /> компилируется в React.createElement('component') (html-тег)<component /> компилируется в React.createElement(Component)<obj.component /> компилируется в React.createElement(obj.component)@Александр Кирзенберг дал очень хороший ответ, просто хотел добавить еще одну деталь.
React раньше содержал белый список хорошо известных имен элементов, таких как div и т.д., Которые он использовал для различения элементов DOM и компонентов React.
Но поскольку поддерживать этот список не так уж и весело, а веб-компоненты позволяют создавать собственные элементы, они сделали правилом, согласно которому все компоненты React должны начинаться с заглавной буквы или содержать точку.
Когда тип элемента начинается со строчной буквы, он ссылается на встроенный компонент, такой как или, и приводит к строке 'div' или 'span', передаваемой в React.createElement. Типы, которые начинаются с заглавной буквы, такие как compile to React.createElement(Foo) и соответствуют компоненту, определенному или импортированному в вашем файле JavaScript.
Также обратите внимание, что:
Мы рекомендуем называть компоненты заглавными буквами. Если у вас есть компонент, который начинается со строчной буквы, присвойте его заглавной переменной, прежде чем использовать в JSX.
Что означает, что нужно использовать:
const Foo = foo; перед использованием foo в качестве элемента Component в JSX.
Первая часть тега JSX определяет тип элемента React, в основном существует некоторое соглашение Заглавная, строчная, точка-нотация.
Типы заглавных и точечных обозначений указывают, что тег JSX относится к компоненту React,
поэтому, если вы используете компиляцию JSX <Foo /> для React.createElement(Foo)
или <foo.bar /> скомпилировать до React.createElement(foo.bar) и соответствовать компоненту, определенному или импортированному в ваш файл JavaScript.
Пока строчный тип указывает на встроенный компонент, например <div> или <span>, и выводит строку 'div' или 'span', переданную в React.createElement('div').
Реагируйте рекомендацию именования компонентов с большой буквы. Если у вас есть компонент, начинающийся с строчной буквы,
назначьте его капитализированной переменной, прежде чем использовать ее в JSX.
В JSX React Classes капитализируются для обеспечения совместимости XML, так что это не ошибочно для HTML-тега. Если классы реагирования не заглавные, это HTML-тег как предопределенный синтаксис JSX.