-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

ReactDOMとは別に、 module を使用して DOM にレンダリングします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 に答える