Question

我正在尝试创建一个Web平台，其中有两个页面，一个页面是index.html，由系统和与其关联的其他文件创建。我创建了另一个loginSignup.html及其相关文件。我使用了与index.html相同的方法，但是没有渲染任何内容。

这是我loginSignup.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import LoginSignup from './test';


ReactDOM.render(<LoginSignup />, document.getElementById('root1'));

这是test.js：

import React from 'react';
import './App.css';
import './font-awesome.css'



function LoginSignup() {

    return <div>

        <form className="form-signin">
            <div className="text-center mb-4">
                <img className="mb-4" src="icon.svg" alt="" width="72" height="72"/>
                <h1 className="h3 mb-3 font-weight-normal">Assignment Submission System</h1>
                <p>Please Sign-in or Sign-up to continue</p>
            </div>

            <div className="form-label-group">
                <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required
                       autoFocus/>
                <label htmlFor="inputEmail">Email address</label>
            </div>

            <div className="form-label-group">
                <input type="password" id="inputPassword" className="form-control" placeholder="Password" required>
                    <label htmlFor="inputPassword">Password</label>
                </input>
            </div>

            <div className="checkbox mb-3">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me</input>
                </label>
            </div>
            <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">Sign in</button>
        </form>
    </div>

}


export default LoginSignup;

内部loginSignup.html：


<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root1"></div>

index.js在这里：


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './font-awesome.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

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

setTimeout(function(){
    window.location.href = '/loginSignup.html';
}, 1000);




serviceWorker.unregister();

它引起注意。

Answer 1

如果不需要生命周期挂钩，最好使用组件或纯函数。

class LoginSignUp extends React.Component {

   ...
   render() {
     return <div>....</div>
   }
}

或纯函数

export const LoginSignUp = () => {}

尝试回用（）

return (
<div>.....</div>
);

Answer 2

我能够编译并在您的表单输出中看到

您的<input>的HTML布局不正确，请参考以下正确的JSX

import React from "react";
import ReactDOM from "react-dom";
//import "./index.css";
//import LoginSignup from "./test";
export default function LoginSignup () { /*move this portion in separate file*/

  return (<div>

      <form className="form-signin">
          <div className="text-center mb-4">
              <img className="mb-4" src="icon.svg" alt="" width="72" height="72"/>
              <h1 className="h3 mb-3 font-weight-normal">Assignment Submission System</h1>
              <p>Please Sign-in or Sign-up to continue</p>
          </div>

          <div className="form-label-group">
              <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required
                     autoFocus/>
              <label htmlFor="inputEmail">Email address</label>
          </div>

          <div className="form-label-group">
              <input type="password" id="inputPassword" className="form-control" placeholder="Password" required />
                  <label htmlFor="inputPassword">Password</label> 
          </div>

          <div className="checkbox mb-3">
              <label>
                  <input type="checkbox" value="remember-me"/> Remember me 
              </label>
          </div>
          <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">Sign in</button>
      </form>
  </div>)

}
ReactDOM.render(<LoginSignup />, document.getElementById("root1"));

像下面那样导出您的函数

export default function LoginSignup() {
    return <div>

        <form className="form-signin">
            <div className="text-center mb-4">
                <img className="mb-4" src="icon.svg" alt="" width="72" height="72"/>
                <h1 className="h3 mb-3 font-weight-normal">Assignment Submission System</h1>
                <p>Please Sign-in or Sign-up to continue</p>
            </div>

            <div className="form-label-group">
                <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required
                       autoFocus/>
                <label htmlFor="inputEmail">Email address</label>
            </div>

            <div className="form-label-group">
                **<input type="password" id="inputPassword" className="form-control" placeholder="Password" required/>
                    <label htmlFor="inputPassword">Password</label> 
            </div>**

            <div className="checkbox mb-3">
                <label>
                    **<input type="checkbox" value="remember-me"/> Remember me** 
                </label>
            </div>
            <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">Sign in</button>
        </form>
    </div>

}

JSX HTML代码的突出显示**问题

Answer 3

正如Kannan G所述，您的JSX中有错误。

我已经能够修复它，因此它至少可以呈现： https://codesandbox.io/embed/silly-sea-07ej2

如果您不想单击上面的链接，则这里只是Test.js文件：

import React from "react";
import './App.css';
import './font-awesome.css';

function LoginSignup() {
  return (
    <div>
      <form className="form-signin">
        <div className="text-center mb-4">
          <img className="mb-4" src="icon.svg" alt="" width="72" height="72" />
          <h1 className="h3 mb-3 font-weight-normal">
            Assignment Submission System
          </h1>
          <p>Please Sign-in or Sign-up to continue</p>
        </div>

        <div className="form-label-group">
          <input
            type="email"
            id="inputEmail"
            className="form-control"
            placeholder="Email address"
            required
            autoFocus
          />
          <label htmlFor="inputEmail">Email address</label>
        </div>

        <div className="form-label-group">
          <input
            type="password"
            id="inputPassword"
            className="form-control"
            placeholder="Password"
            required
          />
          <label htmlFor="inputPassword">Password</label>
        </div>

        <div className="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me" /> Remember me
          </label>
        </div>
        <button
          className="btn btn-lg btn-primary btn-block btn-animated"
          type="submit"
        >
          Sign in
        </button>
      </form>
    </div>
  );
}

export default LoginSignup;

我也建议您安装react开发人员工具。

如何正确渲染React.js-不渲染

3 个答案: