React中组件的插槽实现

插槽是React中比较重要的一个概念，它允许你将组件的一部分内容替换为自定义内容。在React中，插槽的实现主要通过children属性来完成。下面我们来详细了解一下React中插槽的实现。

React中的插槽

我们先看下面例子：

import React,{Component} from "react";
import NavBar from "./nav-bar";
import NavBarTwo from "./nav-bar-two";

export class App extends Component{
    render(){
        const btn = <button>按钮2</button>
        
        return (
            <div>
                {/* 1.使用children实现插槽 */}
                <NavBar>
                    <button>按钮</button>
                    <h2>哈哈哈</h2>
                    <i>斜体文本</i>
                </NavBar>
                {/* 2.使用props实现插槽 */}
                <NavBarTwo leftSlot={btn} centerSlot={<h2>呵呵呵</h2>} rightSlot={<i>斜体2</i>}></NavBarTwo>
            </div>
        )
    }
}


export default App;

上面代码中，我们使用了两个组件，NavBar和NavBarTwo，它们都是通过插槽来显示内容。NavBar组件通过children属性来接收内容，然后通过{this.props.children}来显示内容。NavBarTwo组件通过props来接收内容，然后通过{this.props.leftSlot}、{this.props.centerSlot}、{this.props.rightSlot}来显示内容。

NavBar组件

我们先来看一下NavBar组件的实现：

import React,{Component} from "react";
import PropTypes from "prop-types"
import "./style.css"

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

NavBar.propTypes = {
    childern:PropTypes.array
}

export default NavBar

这里再附上style.css文件：

h1,h2,body{
    margin: 0px;
    padding: 0px;
}

.nav-bar{
    display: flex;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.left,.right{
    width: 80px;
    background-color: #f00;
}

.center{
    flex:1;
    background-color: #f80;
}

这里我们通过childern来接收插槽内容，并通过children[0]、children[1]、children[2]来分别显示左侧、中间和右侧的内容。可以看到，NavBar组件的实现非常简单，通过children来接收插槽内容，然后通过{this.props.children}来显示内容。

NavBarTwo组件

我们再来看一下NavBarTwo组件的实现：

import React,{Component} from "react";

export class NavBarTwo extends Component{
    render(){
        const { leftSlot,centerSlot,rightSlot } = this.props
        
        return (
            <div className="nav-bar">
                <div className="left">{leftSlot}</div>
                <div className="center">{centerSlot}</div>
                <div className="right">{rightSlot}</div>
            </div>
        )
    }
} 

export default NavBarTwo

这里我们通过props来接收插槽内容，然后通过{this.props.leftSlot}、{this.props.centerSlot}、{this.props.rightSlot}来分别显示左侧、中间和右侧的内容。可以看到，NavBarTwo组件的实现也非常简单，通过props来接收插槽内容，然后通过{this.props.children}来显示内容。

本文总结

本文主要介绍了React中插槽的实现，通过children属性和props来实现插槽。通过本文的介绍，相信大家已经对React中插槽的实现有了更深入的了解。这里我们就会发现React的灵活之处了吧！最后我们附上效果图：

感谢大家观看，我们下次见