Hello World在JSBin上不起作用

Question

我简单的hello world尝试有什么问题？ 这是JSBin

class Hello extends React.Component {
  render() {
    return(
      <h1>Hello {this.props.name}</h1>
    )
  }
}

React.render(
  <Hello name="World!"/>,
  document.getElementById('name');
)

Answer 1

您使用模块ReactDOM渲染到DOM，与React分开：

ReactDOM.render(<Hello name="World!" />, document.getElementById("name"));

另外，您的分号放错了位置。 记住， ReactDOM是一个不同的模块。 根据文档：

react-dom软件包提供了特定于DOM的方法，可在您的应用程序的顶层使用...

ReactDOM.render
 render( ReactElement element, DOMElement container, [function callback] ) 

Answer 2

这是0.14引入的最新更改。 他们将React分解为一个核心库和DOM适配器。 现在通过ReactDOM.render()完成渲染

由于您使用的是版本15.1.0，因此应该使用ReactDOM.render（），并且为此，需要在您的jsbin html中包括react-dom作为依赖项，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

同样在ReactDOM.render您需要将分号ReactDOM.render();之后ReactDOM.render(); 而不是里面。

这是工作片段。

 class Hello extends React.Component { render() { return( <h1>Hello {this.props.name}</h1> ) } } ReactDOM.render( <Hello name="World!"/>, document.getElementById('name') );

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="name"></div> </body> </html>

Hello World在JSBin上不起作用

问题描述

2 个解决方案

解决方案1
2 2016-09-20 16:29:06

解决方案2
0 已采纳 2016-09-21 03:47:01

Hello World在JSBin上不起作用

问题描述

2 个解决方案

解决方案1 2 2016-09-20 16:29:06

解决方案2 0 已采纳 2016-09-21 03:47:01

解决方案1
2 2016-09-20 16:29:06

解决方案2
0 已采纳 2016-09-21 03:47:01