如何将React App中的语义元素拆分为独立React组件？

先整理项目结构，在src目录下新建components文件夹，用来存放拆分后的组件文件：

src/
├── App.js
└── components/
    ├── Header.js
    ├── Nav.js
    └── Footer.js

1. 创建Nav组件（components/Nav.js） #

把原代码里的导航部分单独抽成组件：

export default function Nav() {
  return (
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  );
}

2. 创建Header组件（components/Header.js） #

Header组件需要容纳内部的图片和Nav组件，这里直接引入拆分好的Nav，同时可以接收title属性（如果后续需要复用标题的话）：

import Nav from './Nav';

export default function Header(props) {
  return (
    <header>
      <img src="http://jordanbr.pythonanywhere.com/static/restaurant/img/logo.png" alt="Little Lemon Logo" />
      <Nav />
    </header>
  );
}

3. 创建Footer组件（components/Footer.js） #

把页脚部分抽成独立组件：

export default function Footer() {
  return (
    <footer>
      <p>Contact</p>
      <p>Links To Social Media</p>
    </footer>
  );
}

4. 修改App.js #

导入拆分后的组件，替换原有的语义标签。注意React.Fragment不支持添加className，所以把className="App"移到外层div上：

import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';

function App() {
  return (
    <div className="App">
      <Header title="Little Lemon" />
      <Footer />
    </div>
  );
}

export default App;

新手常见踩坑点 #

• 忘记在组件文件中写export default，或者在App.js中忘记import组件，导致组件无法被识别
• 组件名首字母必须大写（比如Header而非header），否则React会把它当作普通HTML标签处理
• 给React.Fragment添加className，Fragment本身不支持这个属性，需要改用div或其他容器标签
• 不知道用props.children传递子元素（如果需要在组件内嵌套内容的话），导致嵌套的内容无法显示

内容的提问来源于stack exchange，提问作者Noa Tov