2017-05-15 9 views
0

私のindex.jsファイルに<h1>タグの内容がページに読み込まれない理由がわかりません。私はReactJSで練習アプリを作ろうとしていますが、それは私も始められません。私はこれを是正するために多くのことを試みましたが、毎回短くなりました。私のページに必要なものが表示されないのはなぜですか?

はここに私のindex.html

<!DOCTYPE html> 
<html> 
<title>Lamda</title> 
    <marquee>Welcome to Lamda!</marquee> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="user-scalable = yes"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="index.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> 
</head> 

<body> 

<div id="LamdaPage"></div> 

</body> 

<script type="text/babel" src="index.js"></script> 
</html> 

だここでは、関数が値を返さなければならないことに注意しなければならない私のindex.js

var LamdaPage = React.createClass({ 
    render: function() { 
     <div> 
     <h1>Why won't this show?</h1> 
     </div> 
    } 
}); 

ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage")); 
+2

関数に 'return'キーワードがないようです。 – Pointy

+0

@Pointy面白いことは...私はちょうど、この質問を2番目に気づいた。それにもかかわらず、応答に感謝します。 – bojack

答えて

0

です。この場合、render関数は、関数の本体として配置するHTMLとして値をHTMLとして返さなければなりません。

var LamdaPage = React.createClass({ 
    render: function() { 
     return (<div> 
     <h1>Why won't this show?</h1> 
     </div>); 
    } 
}); 

ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage")); 
関連する問題