react中children类似于vue中的slot（插槽），父给子留位置

App中只引入Father组件，并只渲染它

import React, { useState, useEffect, useCallback } from 'react'
import Father from './components/Father'



export default function App() {


  return (
    <div className='App'>
      <Father />
    </div>
  )
}

Father组件要是这样，<Son></Son>标签内的内容能显示出来吗？，答案是显示不出来的。

import React from 'react'
import Son from './Son'

export default function Father() {
    return (
        <div>
            <h1>我是Father组件</h1>
            <Son>
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
            </Son>
        </div>
    )
}

Son组件内props.children就获取到上面<Son></Son>标签内的内容，然后放在页面就能显示

import React from 'react'

export default function Son(props) {
    const { children } = props
    return (
        <div>
            {children}
        </div>
    )
}