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