美文网首页
React 实现Vue的插槽功能

React 实现Vue的插槽功能

作者: coderhzc | 来源:发表于2021-12-21 17:26 被阅读0次

怎么实现Vue的插槽功能呢?

1.第一种实现方式

父组件 App.js

import React, { Component } from "react";
import NavBar from "./NavBar";
export default class App extends Component {
  render() {
    return (
      <div>
        {/*  1. 第一种实现的方式 */}
        <NavBar>
          <span>左边</span>
          <strong>中间</strong>
          <a href="#">右边</a>
        </NavBar>
      </div>
    );
  }
}

NavBar.js页面

import React, { Component } from "react";
import "./style.css";

export default class NavBar extends Component {
  render() {
    console.log(this.props.children);
    return (
      // 1. 第一种实现的方式
      <div className="nav-bar">
        <div className="nav-left">{this.props.children[0]}</div>
        <div className="nav-center">{this.props.children[1]}</div>
        <div className="nav-right">{this.props.children[2]}</div>
      </div>
    );
  }
}

style.css


body {
  padding: 0;
  margin: 0;
}
.nav-bar {
  display: flex;
}

.nav-left, .nav-right {
  height: 44px;
  width: 70px;
  background-color: red;
  line-height: 44px;
  text-align: center;
}

.nav-center {
  flex: 1;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: blue;
}

实际截图

image.png

2.第二中方式实现

实际截图

image.png

相关文章

网友评论

      本文标题:React 实现Vue的插槽功能

      本文链接:https://www.haomeiwen.com/subject/xfvxqrtx.html