React.js簡單的組件組成問題

Question

我嘗試重現下面是一個簡單的HTML代碼反應：

經典HTML

<div> 
    Hello 
    <div>child</div> 
    <div>child</div> 
    <div>child</div> 
</div> 

陣營（的作品）

var HelloComponent = React.createClass(
{ 
    render: function() 
    { 
    return (
     <div> 
     Hello 
     <div>child</div> 
     <div>child</div> 
     <div>child</div> 
     </div> 
    ); 
    } 
}); 

var mount = React.render(<HelloComponent/>, document.body); 

React（not works）

var childComponent = React.createClass(
{ 
    render: function() 
    { 
    return (<div>child</div>); 
    } 
}); 

var HelloComponent = React.createClass(
{ 
    render: function() 
    { 
    return (
     <div> 
     Hello 
     <childComponent/> 
     <childComponent/> 
     <childComponent/> 
     </div> 
    ); 
    } 
}); 

var mount = React.render(<HelloComponent/>, document.body); 

錯誤：

Uncaught TypeError: Cannot read property 'replace' of undefined 
createSourceCodeErrorMessage 
transformCode 
... 

我怎麼會錯過？謝謝。

Answer 1

俘獲組件名稱。從documentation：

HTML Tags vs. React Components

React can either render HTML tags (strings) or React components (classes).

To render a HTML tag, just use lower-case tag names in JSX:

var myDivElement = <div className="foo" />; 
React.render(myDivElement, document.body); 

To render a React Component, just create a local variable that starts with an upper-case letter:

var MyComponent = React.createClass({/*...*/}); 
var myElement = <MyComponent someProperty={true} />; 
React.render(myElement, document.body); 

React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.