在簡單示例中，React組件未呈現
[英]React component not rendering in simple example
問題描述
我期待看到“嗨”，但想到沒有得到任何錯誤，也沒有任何東西在屏幕上呈現。 請幫忙！
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="div1"></div> <script type="text/babel"> function myApp(){ return <h1>Hi</h1>; } var elem = ( <div> <myApp /> </div> ); ReactDOM.render(elem, document.getElementById('div1')); </script> </div> </body> </html>
2 個解決方案
解決方案1
2 已采納 2017-04-20 07:19:03
您需要使用MyApp而不是myApp 。
原因 ：
如果React組件名稱以lowercase letter ，則不顯示Renders ，並且您在瀏覽器console沒有收到任何錯誤消息，因為小寫字母被視為HTML元素，其規則是所有React組件必須以大寫字母開頭信。
檢查工作示例：
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="div1"></div> <script type="text/babel"> function MyApp(){ return <h1>Hi</h1>; } var elem = ( <div> <MyApp /> </div> ); ReactDOM.render(elem, document.getElementById('div1')); </script> </div> </body> </html>
解決方案2
1 2017-04-20 07:16:11
我的myApp必須是大寫的 。
你的代碼應該是這樣的：
function MyApp(){
return <h1>Hi</h1>;
}
var elem = (
<div>
<MyApp />
</div>
);
反應不渲染簡單組件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.