React组件的嵌套

在React中，组件中还可以嵌套组件，此时组件的关系可称为父子组件。接下来，我将在App组件中嵌套Header、Main和Footer三个组件。

Header.js

import React from "react";

// Header组件的定义
export default function Header() {
	return <div>我是Header组件</div>;
}

Main.js

import React from "react";

// Main组件的定义
export default function Main() {
	return <div>我是Main组件</div>;
}

Footer.js

import React from "react";

// Footer组件的定义
export default function Footer() {
	return <div>我是Footer组件</div>;
}

App.js

import React, { Component } from 'react'
import Header from './Header'
import Main from './Main'
import Footer from './Footer'

export default class App extends Component {
  render() {
    return (
      <div>
        <Header></Header>
        <Main></Main>
        <Footer></Footer>
      </div>
    )
  }
}