React.js简单的组件组合问题

Question

我尝试在 React 中重现以下简单的 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（无效）

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.

React.js简单的组件组合问题

React.js Simple component composition issue

javascript

reactjs