React 实现插槽功能

一.需求实现一个插槽功能

image.png

二. 在父元素的使用-- App.js

import React, { Component } from 'react';

import NavBar2 from "./NavBar2"

class App extends Component {
  render() {
    return (
      <div>
        {/**
         * 
         * 第二种方式
         * 是一个单标签的形式去写格式是: 属性={<标签名>需要的内容</标签名>} 以这种格式来写
         * 在子组件中获取的方式是: this.props; 解构赋值: const { leftSlot,centerSlot,rightSlot }
         * 
         * */}
        <NavBar2 name="楚楚胡" leftSlot={<span>返回</span>} centerSlot={<input />} rightSlot={<span>后退</span>} />
      </div>
    );
  }
}

export default App;

三.在子页面使用NavBar.js

import React, { Component } from 'react';

import "./navbar.css"

class NavBar2 extends Component {
  render() {
    console.log(this.props); // 得到一个对象
    const {
      leftSlot,
      centerSlot,
      rightSlot } = this.props
    return (
      <div className="tab-item">
        <div className="tab-left">{leftSlot}</div>
        <div className="tab-center">{centerSlot}</div>
        <div className="tab-right">{rightSlot}</div>
      </div>
    );
  }
}

export default NavBar2;

四.实际截图

image.png