-1

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

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

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

2 回答 2

2

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

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

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

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

ReactDOM.render

render(
  ReactElement element,
  DOMElement container,
  [function callback]
)
于 2016-09-20T16:29:06.173 回答
0

这是 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>

于 2016-09-21T03:47:01.163 回答