1.13 组件的内容是如何组合到一起的

一、组件内容的组合

  1. 直接在子组件中调用的方式：

    // 子组件
function Head() {
  return (
    <>
      <div>Head</div>
    </>
  )
}

// 子组件
function Welcome() {
  return (
    <>
      <div>Welcome</div>
      <Head></Head>
    </>
  )
}

// 父组件
function App() {
  return (
    <>
      <div>Default Template</div>
      <Welcome>
      </Welcome>
    </>
  )
}

export default App

  2. 利用props的children属性进行组件传递渲染

    // 子组件
function Head() {
  return (
    <>
      <div>Head</div>
    </>
  )
}

interface param {
  children: unknown
}
// 子组件
function Welcome({ children }:any) {
  return (
    <>
      <div>Welcome</div>
      {children}
    </>
  )
}

// 父组件
function App() {
  return (
    <>
      <div>Default Template</div>
      <Welcome>
        <Head></Head>
      </Welcome>
    </>
  )
}

export default App

    也是利用了父子通信实现

  3. 两种方案的区别：作用域的区别

    1. 第一种方案的作用域在Welcome中，只能获取Welcome中的传参，不可以获取到App的传参

    2. 第二种方案的作用域在APP中，与Welcome没有关系

二、如何分别传递多组内容

  1. 只要是大括号能接受的，都可以进行传递，例如：样式

上一页1.12 组件之间是如何进行通信的下一页1.14 通信的数据是如何添加默认值的

最后更新于