Почему не работает создание React-элемента?

Question

[Дмитрий Потылицын]

Здравствуйте! Интересует одна странная особенность. Приведу пример кода:
Есть объект React-Router'a, в котором формируется динамический маршрут:

{
      path: '<какой-то путь>',
      getComponent(location, cb) {
        require.ensure([], require => {
          cb(null, test());
        }, '<какой-то чанк-нейм>');
      }
    }

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

function PropsPasser(element, props) {
  class WrapClass extends React.Component {
    constructor(props){
      super(props);
    }
    render(){
      //return <element />              <------- ТАК НЕ РАБОТАЕТ (пустая страница)! ПОЧЕМУ?
      return React.createElement(element)
    }
  }
  return WrapClass
}

function test(type) {
  let asyncObj = require('<какой-то путь>');
  let asyncRoute = asyncObj.default;
  let propsPasser = PropsPasser(asyncRoute, {type: "pew-pew"});
  return propsPasser;
}

Как известно из документации React, то конструкции < element / > и React.createElement(element), должны быть, по сути, идентичными. Что я упустил?

Answer 1

[Sayonji]

Насколько я знаю, с маленькой буквы так можно рендерить только теги. Попробуйте
function PropsPasser(Element, props)
и
<Element />

Comments

[Дмитрий Потылицын]

Господи...сработало, спасибо! Часа 4 пытался понять в чём дело ( ~_~ )...Не припомню, что бы это было в документации в июле прошлого года...стараюсь периодически перечитывать оф.доки, ибо часто обновляются...но что-то этот абзац упустил...Еще раз спасибо.

[Sayonji]

Дмитрий Потылицын: Ну, я так понимаю, если бы вы заглянули в код страницы, вы бы увидели там хтмл .

[Дмитрий Потылицын]

Sayonji: заглядывал, видел, и не понял почему :(

[Максим]

Дмитрий Потылицын: не помню тоже где я читал это, но 100% реакту важно, чтобы компоненты были написаны с большой буквы, так как если он видит в jsx тэг с маленькой буквы, то он думает, что это html тэг

[Aves]

https://facebook.github.io/react/docs/jsx-in-depth...

[Aves]

это не реакт, а jsx-transform их раздичает

<hello /> => React.createElement("hello", null)
<Hello /> => React.createElement(Hello, null)