Hello World在JSBin上不起作用

问题描述：

我的简单hello世界尝试有什么问题？这里的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'); 
)

答

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

完成，因为您使用的版本15.1.0你应该使用ReactDOM.render（），为了做到这一点，你需要包括反应-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>

答

您呈现到DOM与模块ReactDOM，分开React：

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

此外，您的分号是错误的。请记住，ReactDOM是一个不同的模块。每the documentation：

的反应-DOM包提供了可以在您的应用程序的顶层使用的特定DOM的方法...

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

Hello World在JSBin上不起作用

相关推荐