如何在render中使用render（）？

我刚开始学习React并试图让Render（）工作。如何在render中使用render（）？

我无法获取要添加到我的html页面的内容。

这是我的index.html

<html> 
<head> 
<script async src="/bundle.js"></script> 
</head> 
<body> 
    <div id="app"></div> 
</body> 
</html>

，这是我main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class Layout extends React.Component{ 
    render(){ 
    return (
     <h1>It works!</h1> 
    ); 
    } 
} 

document.addEventListener('DOMContentLoaded', function() { 
ReactDOM.render(<Layout />, document.getElementById('app')); 
});

我曾尝试不使用引用的代码JS，但都不起作用。

<html> 
    <head> 
    <script src="bundle.js"></script> 
    </head> 
    <body> 
    <div id="app"></div> 
    <script type="text/babel"> 
     ReactDOM.render(<h1>Hello World</h1>, document.getElementById('app')); 
    </script> 
    </body> 
</html>

来源

2017-07-24 earthyearth

您的第一个html包含异步脚本标记，可能会加载内容，但不包含脚本。第二个html，ReactDOM是从哪里加载的？ – T4rk1n

控制台中是否有任何错误？ – jered

哦，是的。第二个html有一个错误：bundle.js：304未捕获错误：_registerComponent（...）：目标容器不是DOM元素。 – earthyearth

要呈现dom，只需将脚本标记放置在要渲染的元素之后。

的index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>React app</title> 
</head> 
<body> 
<div id="app"></div> 
<script src="app.min.js"></script> 
</body> 
</html>

在main.js：

ReactDOM.render(<App />, document.getElementById('app'))

没有必要把一个事件侦听器的方式。

来源

2017-07-25 00:11:05 T4rk1n

我在

之后移动了，但它仍然无法工作。 – earthyearth

@earthyearth你删除了事件监听器吗？ – T4rk1n

是的，但它仍然说不是DOM元素。 – earthyearth

如何在render中使用render（）？

回答

相关问题