React中实现插槽效果的方案详解

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

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

return (
  <div>
    {/* 父组件将要插入到子组件的元素写到组件标签中 */}
    <NavBar>
      <button>按钮</button>
    </NavBar>
  </div>
)

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

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