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);

反应（不起作用）

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标记与反应组件

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

要呈现HTML标记，只需在JSX中使用小写标记名称：
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);
要渲染React Component，只需创建一个启动的局部变量用大写字母：
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);
React的JSX使用大写与小写的约定来区分本地组件类和HTML标记之间。

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

1 个答案: