日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中實現插槽效果的方案詳解_React

作者：林有酒 ? 更新時間： 2022-11-17 編程語言

React實現插槽

在開發中，我們抽取了一個組件，但是為了讓這個組件具備更強的通用性，我們不能將組件中的內容限制為固定的div、span等等這些元素。

我們應該讓使用者可以決定某一塊區域到底存放什么內容

在這里插入圖片描述

這種需求在Vue當中有一個固定的做法是通過slot來完成的，React呢？

在React中是沒有插槽的概念的, 或者說在React中是不需要插槽的, 因為React對于這種需要插槽的情況非常靈活，有兩種方案可以實現：

組件的children子元素；

props屬性傳遞React元素；

children實現插槽

每個組件都可以獲取到 props.children：它包含組件的開始標簽和結束標簽之間的內容。

例如我們實現一個navbar, 要求左邊, 中間, 右邊的內容是不固定的, 由使用者來決定到底放什么

在父組件的子組件標簽中寫入要插入到子組件的元素

import React, { Component } from 'react'
import NavBar from './c-cpns/NavBar'

export class App extends Component {
  render() {
    return (
      <div>
        {/* 父組件將要插入到子組件的元素寫到組件標簽中 */}
        <NavBar>
          <button>按鈕</button>
          <h2>標題</h2>
          <i>斜體</i>
        </NavBar>
      </div>
    )
  }
}

export default App

在子組件中通過this.props可以獲取到一個children屬性, 該屬性中包含子組件標簽開始到結束之間的內容

import React, { Component } from 'react'
import './style.css'

export class NavBar extends Component {
  render() {
    // 在子組件通過props中的children, 獲取到要插入的元素
    const { children } = this.props
    return (
      <div className='nav-bar'>
        <div className='left'>
          {children[0]}
        </div>
        <div className='center'>
          {children[1]}
        </div>
        <div className='right'>
          {children[2]}
        </div>
      </div>
    )
  }
}

export default NavBar

注意: 如果children中有多個元素, 那么children是一個數組, 數組中存放著所有內容; 如果只插入一個元素到子組件中, 那么children本身就是插入的該元素, 如下:

父組件中只插入了一個元素

return (
  <div>
    {/* 父組件將要插入到子組件的元素寫到組件標簽中 */}
    <NavBar>
      <button>按鈕</button>
    </NavBar>
  </div>
)

子組件直接使用children即可

render() {
  // 在子組件通過props中的children, 獲取到要插入的元素
  const { children } = this.props
  return (
    <div className='nav-bar'>
      <div className='left'>
        {children}
      </div>
    </div>
  )
}

props實現插槽

通過children實現的方案雖然可行，但是有一個弊端：通過索引值獲取傳入的元素很容易出錯，不能精準的獲取傳入的原生；

而且對順序有嚴格的要求

另外一個種方案就是使用 props 實現(這個方案也是開發中使用的比較多的方案, 個人更推薦)：

我們之間通過具體的屬性名，可以讓我們在傳入和獲取時更加的精準；

首先在父組件通過props的方式將要插入的元素傳入到子組件中

render() {
  // 在子組件通過props中的children, 獲取到要插入的元素
  const { children } = this.props
  return (
    <div className='nav-bar'>
      <div className='left'>
        {children}
      </div>
    </div>
  )
}

再在子組件中獲取到傳遞的數據進行展示

import React, { Component } from 'react'

export class NavBarTow extends Component {
  render() {
    // 在子組件中獲取到父組件傳遞過來的數據
    const { leftSlot, centerSlot, rightSlot } = this.props

    return (
      <div className='nav-bar'>
        {/* 將傳遞過來的數據進行展示 */}
        <div className='left'>
          {leftSlot}
        </div>
        <div className='center'>
          {centerSlot}
        </div>
        <div className='right'>
          {rightSlot}
        </div>
      </div>
    )
  }
}

export default NavBarTow

原文鏈接：https://blog.csdn.net/m0_71485750/article/details/126634054

欄目分類
最近更新