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

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

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

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

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

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

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

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

89
reactjs

5 ответов

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

посмотреть HTML-теги против компонентов React.

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

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

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

33

С официальный реагируют ссылка:

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

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

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

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

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

3

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

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

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

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

2

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

1