反应渲染后的空组件

Question

我正在尝试在html页面中呈现react组件.我到目前为止所做的是实施这样的反应

var component =  React.createClass({
render: function(){
var testStyle = { fontSize: '18px', marginRight: '20px'};
return (
  <div>

    <h1>Hello React</h1>
    <div><ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul></div>
  </div>

  )

  }
  });

 ReactDOM.render(< component/>,
 document.getElementById('content')
 );

在HTML页面我有这个

<div id="content"></div>

当我检查HTMl页面时,我发现在div内部我有一个像这样的空组件

<component data-reactroot=""></component>

我在这做错了什么

Answer 1

React组件必须始终以大写字母开头,否则React会将其解释为简单的HTML元素.

大写类型表示JSX标记指的是React组件.

话虽如此,定义

const Component = React.createClass...

然后呈现像

ReactDOM.render(<Component />, 
  document.getElementById('content')
);