Назви компонентів ReactJS повинні починатися з великих літер?

148

Я граю разом із рамкою ReactJS на JSBin .

Я помітив, що якщо назва мого компонента починається з малої літери, це не працює.

Наприклад, таке не відображається:

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

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

Але як тільки я замінити fmlз Fmlнею дійсно роблять.

Чи є причина, що я не можу починати теги з малих літер?

javascript reactjs

— shaunakde
джерело

перевірте відповіді на це запитання, щоб отримати ще кілька детисалів: Html не відображається у браузері - React js

— Mayank Shukla

199

У JSX маленькі імена тегів вважаються HTML-тегами. Однак, малі регістри імен з крапкою (доступом до властивостей) не є.

Див. Теги HTML проти компонентів React .

<component />компілює в React.createElement('component')(html тег)
<Component /> компілює до React.createElement(Component)
<obj.component /> компілює до React.createElement(obj.component)

— Олександр Кірценберг
джерело

11

Додайте ще півгодини до прилавку. Я божевільно намагався зробити щось подібне let component = components[compType]; <component/>і помилково помилявся.

— Зекес

2

Я спробував і те, <components[name] />що не працює.

— 李岡諭

8

Я не можу повірити, що раніше не помічав, що існує таке правило.

— шаош

7

Це погана ідея. Я тут ввічливий.

— Рольф

Так, це може бути надзвичайно сприятливим для n00bs, оскільки, якщо виклик Componentsзамість components, їх прекрасний сайт завантажиться без помилок, але без вмісту!

— olisteadman

45

@Alexandre Kirszenberg дав дуже гарну відповідь, просто хотів додати ще одну деталь.

React використовується для містять білий список відомих імен елементів, таких як divetc., який він використовував для розмежування елементів DOM та компонентів React.

Але оскільки збереження цього списку не все так цікаво, і тому, що веб-компоненти дозволяють створювати власні елементи, вони створили правило, що всі компоненти React повинні починатися з великої літери або містити крапку .

— Андерс Екдал
джерело

3

чудова інформація, ще краще, якщо є офіційна посилання на документ. Дякую.

— WaiKit Kung

коли це було змінено?

— nolawi

11

З офіційної довідки React :

Коли тип елемента починається з малої літери, він посилається на вбудований компонент на зразок або і призводить до того, що рядок 'div' або 'span' передається React.createElement. Типи, які починаються з великої літери, як компіляція до React.createElement (Foo) і відповідають компоненту, визначеному або імпортованому у вашому JavaScript-файлі.

Також зауважте, що:

Ми рекомендуємо називати компоненти з великої літери. Якщо у вас є компонент, який починається з малої літери, призначте його великою величиною, перш ніж використовувати її в JSX.

Що означає, що треба використовувати:

const Foo = foo;перед використанням fooяк компонентного елемента в JSX.

— 0легка
джерело

3

Перша частина JSXтегу визначає тип елемента React, в основному є деяка конвенція з великої літери, малої літери, крапки .

Капіталізована і точка-позначення типу вказує , що JSXтег має в увазі Реагувати компонент, так що якщо ви використовуєте JSX <Foo />компілювати React.createElement(Foo)
АБО
<foo.bar />компілювати React.createElement(foo.bar)і відповідають компонента , визначеного або імпортованого в файлі JavaScript.

У той час як малі типи вказують на вбудований компонент, як <div>або, <span>і призводить до рядка 'div'або 'span'передається до React.createElement('div').

Реагуйте, рекомендую називати компоненти з великої літери. Якщо у вас є компонент, який починається з малої літери, призначте його великою величиною, перш ніж використовувати її в JSX.

— Умаїр Ахмед
джерело

2

У JSX Реактивні класи використовуються з великої літери, щоб зробити XML сумісним, щоб не помилитися з тегом HTML. Якщо класи реагування не використовуються з великої літери, це тег HTML як попередньо визначений синтаксис JSX.

— PKA
джерело