Javascript 在reactjs中放置页眉和页脚标记的位置 import React，{Component}来自'React'； 从'react redux'导入{connect}； 从“../../redux/reducer”导入{login}； 导入“./LoginForm.css”； 类LoginForm扩展组件{ 建造师（道具）{ 超级（道具）； this.state={}； this.onSubmit=this.onSubmit.bind（this）； } render（）{ 让{username，password}=this.state； 让{isLoginPending，IsLoginAccess，loginError}=this.props； 返回( 公司登录 用户名/用户ID： this.setState（{username:e.target.value}）value={username}/> 密码： this.setState（{password:e.target.value}）value={password}/> 版权所有©；multihands.com。 ) } 提交（e）{ e、 预防默认值（）； 让{username，password}=this.state； this.props.login（用户名、密码）； 这是我的国家({ 用户名：“”， 密码：“” }); } } 常量mapStateToProps=（状态）=>{ 返回{ isLoginPending:state.isLoginPending， IsLoginSAccess:state.IsLoginSAccess， 登录错误：state.login错误 }; } const mapDispatchToProps=（调度）=>{ 返回{ 登录：（用户名，密码）=>dispatch（登录（用户名，密码）） }; } 导出默认连接（mapStateToProps、mapDispatchToProps）（LoginForm）；

这是我的登录页面，我想在页面中添加标题。。我已经添加了它，如代码所示…但不幸的是，运行后出现错误。。我在代码中的页眉和页脚标记放在哪里。。如果我们把它放在表单中，代码会运行。但是应用于表单的css会受到添加页脚和页眉的影响。。因此，我需要一种正确的方法来放置页眉和页脚，而不影响我的表单。

问题是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 (
          <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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../../redux/reducer”导入{login}；
导入“./LoginForm.css”；
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
this.onSubmit=this.onSubmit.bind（this）；
}
render（）{
让{username，password}=this.state；
让{isLoginPending，IsLoginAccess，loginError}=this.props；
返回(
公司登录
用户名/用户ID：
this.setState（{username:e.target.value}）value={username}/>
密码：
this.setState（{password:e.target.value}）value={password}/>


版权所有©；multihands.com。
)
}
提交（e）{
e、 预防默认值（）；
让{username，password}=this.state；
this.props.login（用户名、密码）；
这是我的国家({
用户名：“”，
密码：“”
});
}
}
常量mapStateToProps=（状态）=>{
返回{
isLoginPending:state.isLoginPending，
IsLoginSAccess:state.IsLoginSAccess，
登录错误：state.login错误
};
}
const mapDispatchToProps=（调度）=>{
返回{
登录：（用户名，密码）=>dispatch（登录（用户名，密码））
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（LoginForm）；

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

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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../../redux/reducer”导入{login}；
导入“./LoginForm.css”；
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
this.onSubmit=this.onSubmit.bind（this）；
}
render（）{
让{username，password}=this.state；
让{isLoginPending，IsLoginAccess，loginError}=this.props；
返回(
公司登录
用户名/用户ID：
this.setState（{username:e.target.value}）value={username}/>
密码：
this.setState（{password:e.target.value}）value={password}/>


版权所有©；multihands.com。
);
提交（e）{
e、 预防默认值（）；
让{username，password}=this.state；
this.props.login（用户名、密码）；
这是我的国家({
用户名：“”，
密码：“”
});
}
}
}
常量mapStateToProps=（状态）=>{
返回{
isLoginPending:state.isLoginPending，
IsLoginSAccess:state.IsLoginSAccess，
登录错误：state.login错误
};
}
const mapDispatchToProps=（调度）=>{
返回{
登录：（用户名，密码）=>dispatch（登录（用户名，密码））
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（LoginForm）；

如果不需要包装器div，可以使用（）如果使用React Fiber

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);

公司登录
用户名/用户ID：
this.setState（{username:e.target.value}）value={username}/>
密码：
this.setState（{password:e.target.value}）value={password}/>


版权及副本；multihands.com。

@EdwardMish同样，在编辑器中使用linter，它应该能够立即捕获此类问题。

<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>