Question

我无法理解为什么我的网页没有加载<h1>文件中index.js标记中的内容。我试图用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/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/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"));

Answer 1

您应该注意函数必须返回值。在这种情况下，render函数必须返回值作为HTML函数体

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

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

为什么我的页面无法显示所需内容？

1 个答案: