React.js简单组件组成问题

React.js Simple component composition issue

本文关键字：成问题 组件 简单 js React      更新时间：2023-09-26

我试图在react中重现以下简单的HTML代码：

经典HTML

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

React（works）

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
...

我想念什么？？谢谢

捕获组件名称。来自文件：

HTML标签与React组件

React可以呈现HTML标记（字符串）或React组件（类）。

要呈现HTML标记，只需在JSX:中使用小写标记名

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

要渲染React组件，只需创建一个开始大写字母：

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

React的JSX使用大小写约定来区分在本地组件类和HTML标记之间。

相关文章：