六、React实现类似Vue插槽的功能-NavBar封装

App.jsx

import React, { Component } from "react";
import NavBar from "./NavBar";
import NavBar2 from "./NavBar2";

export class App extends Component {
  render() {
    return (
      <div>
        {/* children方法实现插槽 */}
        <NavBar>
          <button>按钮</button>
          <h2>标题title</h2>
          <i>icon图标</i>
        </NavBar>

        <NavBar2
          leftSlot={<button>按钮君</button>}
          centerSlot={345}
          rightSlot={643}
        />
      </div>
    );
  }
}

export default App;

NavBar.jsx

import React, { Component } from "react";
export class NavBar extends Component {
  render() {
    const { children } = this.props
    return (
      <div className='nav-bar'>
          <div>{children[0]}</div>
          <div>{children[1]}</div>
          <div>{children[2]}</div>
      </div>
    );
  }
}

export default NavBar;

NavBar2.jsx

import React, { Component } from "react";
export class NavBar2 extends Component {
  render() {
    const { leftSlot, centerSlot, rightSlot } = this.props
    return (
      <div className='nav-bar'>
          <div>{leftSlot}</div>
          <div>{centerSlot}</div>
          <div>{rightSlot}</div>
      </div>
    );
  }
}

export default NavBar2;