Hello World 不适用于 JSBin

Question

我简单的 hello world 尝试有什么问题？这里是 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:

The react-dom package provides DOM-specific methods that can be used at the top level of your app...

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

Answer 2

这是 0.14 引入的最新变化。他们将 React 拆分为核心库和 DOM 适配器。渲染现在通过 ReactDOM.render()

完成

由于您使用的是 15.1.0 版，因此您应该使用 ReactDOM.render() 并且为此您需要将 react-dom 作为依赖项包含在您的 jsbin html 作为

<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

Hello World doesn't work on JSBin

javascript

reactjs

jsbin