Могу ли я создать ReactClass внутри ReactClass?

Question

Я пробовал это, но безуспешно.

var osDD = React.createClass({ 
    propTypes: { 
     dat: React.PropTypes.array 
    }, 
    render: function(){ 
     var li = this.props.dat; 
     console.log(li); 
     return (
      <ul><li></li></ul> 
     ) 
    } 
}); 

var osPre = React.createClass({ 
    render: function(){ 
     var osdd = React.createElement(
      osDD, 
      {dat: this.props.dat} 
     ); 

     return (
      <div> 
       <header>{this.props.title}</header> 
       <p>{this.props.description}</p> 
       <span className="opt_serv_price">{this.props.price}</span> 
       <osdd/> 
      </div> 
     ) 
    } 
}); 

Это просто делает пустой тег <osdd/> в DOM.

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

Answer 1

Хорошо, я наткнулся на этот сайт (http://ricostacruz.com/cheatsheets/react.html#nesting), и он рассказывает о вложенности в React.

Так пытался следовать соответствующим образом и обновлять свои коды быть:

var osDD = React.createClass(/*no changes*/); 
var osPre = React.createClass({ 
render: function(){ 
    return (
     <div> 
      <header>{this.props.title}</header> 
      <p>{this.props.description}</p> 
      <span className="opt_serv_price">{this.props.price}</span> 
      <osDD/> 
     </div> 
    ) 
} 
}); 

Но все же это не сработало. Как видно на более подробных примерах в официальных документах (http://facebook.github.io/react/docs/multiple-components.html), я заметил, что все они определяют их ReactClass с переменными, заглавными.

Так что мне пришлось изменить, мой класс от osDD до OsDD, и он сработал! Думаю, я пропустил где-то в документах об этом. Был бы признателен, если бы кто-нибудь мог указать мне, где это указано.

Answer 2

Отличная работа по поиску ответа, JSX будет запускать createElement за кулисами для вас. Поскольку вы можете технически придумать какой-либо случайный элемент DOM в html, вы скажете JSX, что хотите визуализировать класс React, а не старый старый элемент DOM, запустив первую букву.

Вот документ: React Class Capitalization

Теги HTML против Реагировать компоненты React может либо вынести HTML-теги (строки) или Реагировать компоненты (классы).

Для визуализации HTML-тег, просто использовать строчные имена тегов в JSX

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