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元素。

Capitalized types indicate that the JSX tag is referring to a React component.

话虽如此，定义

const Component = React.createClass...

然后渲染为

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

反应渲染后的空组件

1 个答案: