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

Question

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

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

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

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

var fml = React.createClass({

  render: function () {

    return <a href='google.com'>Go</a>

  }

});



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

но как только я заменить fml С Fml это рендер.

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

643 5

reactjs

5 ответов:

Comments

Ничего не найдено.

Alexandre Kirszenberg · Accepted Answer · 2015-05-21 15:16:36

в JSX имена тегов нижнего регистра считаются тегами HTML. Однако имена тегов нижнего регистра с точкой (метод доступа к свойствам) не являются.

посмотреть HTML теги vs React Components.

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

<Component /> компилируется в React.createElement(Component)

<obj.component /> компилируется в React.createElement(obj.component)

Anders Ekdahl · Accepted Answer · 2015-05-21 15:41:24

Morphaus дал очень хороший ответ, просто хотел добавить еще одну деталь. React используется для хранения белого списка известных имен элементов, таких как div etc, который он использовал для того чтобы продифференцировать между элементами DOM и реагирует компоненты.

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

Oleg · Accepted Answer · 2018-03-14 11:13:07

С официальная ссылка React:

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

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

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

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

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

Umair Ahmed · Accepted Answer · 2017-07-23 12:38:14

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

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

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

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

PKA · Accepted Answer · 2016-04-30 16:10:03

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