8-React如何实现slot

最新推荐文章于 2023-11-02 20:20:59 发布

sunnyboysix

最新推荐文章于 2023-11-02 20:20:59 发布

阅读量248

点赞数

分类专栏： react官网学习文章标签： react.js

本文链接：https://blog.csdn.net/sunnyboysix/article/details/127343217

版权

react官网学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 00:14:12
 * @LastEditTime: 2022-10-16 00:33:54
 */
import React, { Component } from 'react'

import NavBar from './NavBar'
import NavBar2 from './NavBar2'
import './style.css'

export default class App extends Component {
  render() {
    return (
      <div>
        <NavBar>
          <strong>aaa</strong>
          <strong>bbb</strong>
          <strong>ccc</strong>
        </NavBar>

        <NavBar2
          leftSlot={ <strong>aaa</strong> }
          centerSlot={ <strong>bbb</strong> }
          rightSlot={ <strong>ccc</strong> }
        />
      </div>
    )
  }
}

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 00:14:12
 * @LastEditTime: 2022-10-16 00:28:53
 */
import React, { Component } from 'react';

class NavBar extends Component {
  render() {
    return (
      <div className='nav-bar'>
        <div className='nav-item nav-left'>
          { this.props.children[0] }
        </div>
        <div className='nav-item nav-center'>
          { this.props.children[1] }
        </div>
        <div className='nav-item nav-right'>
          { this.props.children[2] }
        </div>
      </div>
    );
  }
}

export default NavBar;

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-16 00:14:12
 * @LastEditTime: 2022-10-16 00:31:35
 */
import React, { Component } from 'react';

class NavBar2 extends Component {
  render() {

    const { leftSlot, centerSlot, rightSlot } = this.props

    return (
      <div className='nav-bar'>
        <div className='nav-item nav-left'>
          { leftSlot }
        </div>
        <div className='nav-item nav-center'>
          { centerSlot }
        </div>
        <div className='nav-item nav-right'>
          { rightSlot }
        </div>
      </div>
    );
  }
}

export default NavBar2;

body {
  margin: 0;
  padding: 0;
}

.nav-bar {
  display: flex;
}

.nav-item {
  height: 44px;
  line-height: 44px;
  text-align: center;
}

.nav-left, .nav-right {
  width: 70px;
  background: red;
}

.nav-center {
  flex: 1;
  background-color: blue;
}