Hello WorldがJSBinで動作しない

-1

私の単純な世界の試行で何が問題になったのですか？ここでthe JSBin Hello WorldがJSBinで動作しない

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

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

出典

2016-09-20 Maria Jane

これは0.14で導入された非常に最近の変更です。彼らはReactをコアライブラリとDOMアダプタに分割しました。バージョン15.1.0を使用しているので、レンダリングは今ReactDOM.render()

を介して行われますReactDOM.renderを（使用）して、

としてあなたjsbinのHTMLに依存関係として反応し、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-21 03:47:01

あなたはReactは別に、モジュールReactDOMとDOMにレンダリングします：

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

また、あなたのセミコロンは見当違いでした。 ReactDOMは別のモジュールであることを覚えておいてください。 the documentationあたり：

反応-DOMパッケージアプリのトップレベルで使用することができますDOM固有のメソッドを提供しています... ReactDOM.render
render(
    ReactElement element, 
    DOMElement container, 
    [function callback] 
) 

出典

2016-09-20 16:29:06 Li357

Hello WorldがJSBinで動作しない

答えて

関連する問題