在React.js中应将header与footer标签放置在何处？

首先得指出你代码里的一个核心问题：React组件的render方法返回的JSX必须是单个根元素，你现在直接返回<header>和<form>两个同级元素会触发语法错误，这是第一个要修正的点。

接下来分两种场景讲正确的放置方式：

场景1：作为全站通用的头部/底部 #

如果这个<header>是网站所有页面都有的导航栏，<footer>是全站统一的页脚，那不应该放在LoginForm这类页面级组件里，而是要抽成独立的通用组件，放在路由的最外层容器中，让所有页面自动继承。

举个实现例子：

1. 先写一个布局容器组件Layout.js：

import React from 'react';
import './Layout.css';

const Layout = ({ children }) => {
  return (
    <div className="app-wrapper">
      {/* 全站通用头部 */}
      <header className="site-header">
        <h1>Company Portal</h1>
        {/* 这里可以加导航链接、logo等 */}
      </header>
      {/* 页面内容区域，渲染当前路由对应的组件 */}
      <main className="page-content">{children}</main>
      {/* 全站通用页脚 */}
      <footer className="site-footer">
        <p>© 2024 Company Name. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default Layout;

2. 在路由配置中用这个布局包裹所有页面组件（比如App.js）：

import { Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import LoginForm from './LoginForm';
import Dashboard from './Dashboard';

function App() {
  return (
    <Layout>
      <Routes>
        <Route path="/login" element={<LoginForm />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Layout>
  );
}

这样你的LoginForm里只需要专注写登录表单的内容，不用再处理头部和页脚，代码更简洁，也避免了重复编写。

场景2：作为LoginForm组件内部的局部元素 #

如果这个<header>只是登录表单的标题栏，<footer>是登录页面专属的底部提示（比如忘记密码链接），那需要把它们和<form>放在同一个根元素下，你可以用<div>、<section>这类容器标签，或者用React.Fragment（简写为<>）来避免生成额外的DOM节点。

修改你的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 = { username: '', password: '' };
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(e) {
    e.preventDefault();
    const { username, password } = this.state;
    this.props.login(username, password);
  }

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

    // 用React.Fragment包裹所有元素，避免多余DOM节点
    return (
      <>
        <header className="login-header">
          <h1>Company Login</h1>
        </header>
        <form name="loginForm" onSubmit={this.onSubmit} className="login-form">
          <div className="form-group">
            <label>Username:</label>
            <input
              type="text"
              value={username}
              onChange={(e) => this.setState({ username: e.target.value })}
              required
            />
          </div>
          <div className="form-group">
            <label>Password:</label>
            <input
              type="password"
              value={password}
              onChange={(e) => this.setState({ password: e.target.value })}
              required
            />
          </div>
          <button type="submit" disabled={isLoginPending}>
            {isLoginPending ? 'Logging in...' : 'Login'}
          </button>
          {loginError && <div className="error-message">{loginError}</div>}
          {isLoginSuccess && <div className="success-message">Login successful!</div>}
        </form>
        <footer className="login-footer">
          <p>Forgot your password? <a href="/password-reset">Reset here</a></p>
        </footer>
      </>
    );
  }
}

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

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

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

额外说明 #

<header>和<footer>是HTML5语义化标签，React本身对它们没有特殊限制，只要遵守JSX的单根元素规则即可。使用语义化标签能提升页面的SEO和可访问性，建议保持使用，不要随意替换成普通<div>。

内容的提问来源于stack exchange，提问作者Lex V