current position:Home>Vue to react to realize slot function

Vue to react to realize slot function

2022-04-29 04:25:53baoleilei6

 

Two . In the use of parent elements -- App.js

import React, { Component } from 'react';

import NavBar2 from "./NavBar2"

class App extends Component {
  render() {
    return (
      <div>
        {/**
         * 
         *  The second way 
         *  Is a single label form to write the format is :  attribute ={< Tag name > What you need </ Tag name >}  Write in this format 
         *  The way to get in the sub component is : this.props;  Deconstruct assignment : const { leftSlot,centerSlot,rightSlot }
         * 
         * */}
        <NavBar2 name=" Chu chuhu " leftSlot={<span> return </span>} centerSlot={<input />} rightSlot={<span> back off </span>} />
      </div>
    );
  }
}

export default App;

3、 ... and . Use... On the subpage NavBar.js

import React, { Component } from 'react';

import "./navbar.css"

class NavBar2 extends Component {
  render() {
    console.log(this.props); //  Get an object 
    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;

Four . Actual screenshot

 

copyright notice
author[baoleilei6],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/117/202204270552176642.html

Random recommended