将我的页眉和页脚标签放在 reactjs 中的什么位置

Question

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';



class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

  render() {
    let {username, password} = this.state;
    let {isLoginPending, isLoginSuccess, loginError} = this.props;

    return (
          <header>
   <h1>Company Login</h1>
   </header>

      <form name="loginForm" onSubmit={this.onSubmit}>




        <div className="form-group-collection">
          <div className="form-group">

            <label>Username/User ID:</label>
            <input name="username" onChange={e => this.setState({username: e.target.value})} value={username}/>
          </div>


          <div className="form-group">
            <label>Password:</label>
            <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
          </div>
        </div>
        <br/>

        <input type="submit" value="Login" />

  </form>
       <footer>Copyright &copy; multihands.com. </footer>
    )
  }






  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}


const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

这是我的登录页面，我想在我的页面中添加页眉。我已经按照代码所示添加了它...但不幸的是，在运行之后发生错误。我将页眉放在哪里和我的代码中的页脚标记..如果我们把它放在代码运行的表单中..但是应用于表单的 css 会受到添加页脚和页眉的影响..所以我需要正确的方法来放置页眉和页脚不影响我的表单..

Answer 1

问题是 return 语句必须只包含一个元素，而您的代码包含三个。所以基本上这应该有效：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';

class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.onSubmit = this.onSubmit.bind(this);
  }

  render() {
    let { username, password } = this.state;
    let { isLoginPending, isLoginSuccess, loginError } = this.props;

    return (
      <div>
        <header>
          <h1>Company Login</h1>
        </header>

        <form name="loginForm" onSubmit={this.onSubmit}>
          <div className="form-group-collection">
            <div className="form-group">

              <label>Username/User ID:</label>
              <input name="username" onChange={e => this.setState({ username: e.target.value })} value={username} />
            </div>

            <div className="form-group">
              <label>Password:</label>
              <input type="password" name="password" onChange={e => this.setState({ password: e.target.value })} value={password} />
            </div>
          </div>
          <br />

          <input type="submit" value="Login" />

        </form>
        <footer>Copyright &copy; multihands.com. </footer>
      </div>
    )
  }

  onSubmit(e) {
    e.preventDefault();
    let { username, password } = this.state;
    this.props.login(username, password);
    this.setState({
      username: '',
      password: ''
    });
  }
}

const mapStateToProps = (state) => {
  return {
    isLoginPending: state.isLoginPending,
    isLoginSuccess: state.isLoginSuccess,
    loginError: state.loginError
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    login: (username, password) => dispatch(login(username, password))
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

Answer 2

您的渲染函数中需要一个包装器此解决方案应该可以解决您的问题：-

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login } from '../../redux/reducer';
import './LoginForm.css';

class LoginForm extends Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.onSubmit = this.onSubmit.bind(this);
    }

    render() {
        let { username, password } = this.state;
        let { isLoginPending, isLoginSuccess, loginError } = this.props;

        return (
            <div className="wrapper">
                <header>
                    <h1>Company Login</h1>
                </header>

                <form name="loginForm" onSubmit={this.onSubmit}>
                    <div className="form-group-collection">
                        <div className="form-group">

                            <label>Username/User ID:</label>
                            <input name="username" onChange={e => this.setState({ username: e.target.value })} value={username} />
                        </div>


                        <div className="form-group">
                            <label>Password:</label>
                            <input type="password" name="password" onChange={e => this.setState({ password: e.target.value })} value={password} />
                        </div>
                    </div>
                    <br />
                    <input type="submit" value="Login" />
                </form>
                <footer>Copyright &copy; multihands.com. </footer>
            </div>
        );

        onSubmit(e) {
            e.preventDefault();
            let { username, password } = this.state;
            this.props.login(username, password);
            this.setState({
                username: '',
                password: ''
            });
        }

    }
}

const mapStateToProps = (state) => {
    return {
        isLoginPending: state.isLoginPending,
        isLoginSuccess: state.isLoginSuccess,
        loginError: state.loginError
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        login: (username, password) => dispatch(login(username, password))
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

Answer 3

如果您不需要包装器 div 如果使用 React Fiber，您可以使用 Fragments(https://reactjs.org/docs/fragments.html)。

<React.Fragment>
  <header>
      <h1>Company Login</h1>
    </header>

    <form name="loginForm" onSubmit={this.onSubmit}>
      <div className="form-group-collection">
        <div className="form-group">

          <label>Username/User ID:</label>
          <input name="username" onChange={e => this.setState({ username: e.target.value })} value={username} />
        </div>

        <div className="form-group">
          <label>Password:</label>
          <input type="password" name="password" onChange={e => this.setState({ password: e.target.value })} value={password} />
        </div>
      </div>
      <br />

      <input type="submit" value="Login" />

    </form>
    <footer>Copyright &copy; multihands.com. </footer>
</React.Fragment>

将我的页眉和页脚标签放在 reactjs 中的什么位置

where to put my header and footer tags in reactjs

javascript

reactjs

redux-form