Question

当我运行我的节点服务器时，怎么没有显示在html页面上？我是新来的反应，我正在从Code Academy学习。从我一直在学习的东西，我正在做同样的事情。登录框根本没有显示。

Login.js

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

class Login extends React.Component {
  render() {
    return (
      <form id="Login" className="form-signin" action="/login" method="POST">
        <h2 className="form-signin-heading">Sign in</h2>
        <input className="form-control" type="text" id="user" name="user" />
        <label className="sr-only" for="user" />
        <input className="form-control" type="password" id="pass" name="pass" />
        <label className="sr-only" for="pass" />
        <button type="submit">Submit</button> <br />
      </form>
    )
  }
}
ReactDOM.render(<Login />, document.getElementById('app'))

的login.html

<html lang="en">

<head>
  <title>Signin</title>

  <link href="bootstrap.min.css" rel="stylesheet">

  <!--React Libraries -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

</head>

<body>

  <!--React called here  -->
  <div id="app" class="container">

  </div>

  <script src="js/bootstrap.min.js"></script>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="js/login.js" type="text/babel"></script>

</body>

</html>

未捕获的ReferenceError：未定义的require也显示在浏览器控制台上

Answer 1

从login.js中删除import语句

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

如果要运行UMD版本的反应，则不需要它们。

您也可以将login.js重命名为login.jsx，因为它不是正常的js。

Answer 2

您无法使用＆＃34;用于＆＃34; javascript中的HTML属性，因为它是用于迭代的保留关键字。

你应该使用＆＃34; htmlFor＆＃34;

<label className="sr-only" htmlFor="user"></label>

我已经创建了一支笔，请点击以下链接

https://codepen.io/sunilrana/pen/RJKVVG

新的反应，页面/ HTML不显示

2 个答案: