Question

我的简单hello世界尝试出了什么问题？这是the 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是一个不同的模块。每the documentation：

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();而不在其中。

这是工作片段。

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 个答案: