React中组件的作用域插槽是如何实现的？

作用域插槽

作用域插槽的使用场景: 当组件的内容是动态的，但是组件的样式是固定的，这时候可以使用作用域插槽，将动态的内容传递给组件，组件内部使用插槽渲染

我们先看一个例子：

import React,{Component} from "react";
import TabControl from './TabControl'

export class App extends Component{
    constructor(){
        super()
        
        this.state = {
            titles:["流行","新款","精选"],
            tabIndex:0
        }
    }
    
    tabClick(tabIndex){
        this.setState({tabIndex})
    }
    
    getTabItem(item){
        if(item === "流行"){
            return <span>{item}</span>
        }else if(item === "新款"){
            return <button>{item}</button>
        }else{
            return <i>{item}</i>
        }
    }
     
    render(){
        const {titles,tabIndex} = this.state
        
        return (
            <div className="app">
                <TabControl titles={titles} 
                 tabClick={i => this.tabClick(i)}
                // itemType={item=><button>{item}</button>} 
                itemType={item=>this.getTabItem(item)}>
                </TabControl>
                <h1>{titles[tabIndex]}</h1>
            </div>
        )
    }
}

export default App;

上面代码中，我们使用了TabControl组件，TabControl组件内部通过itemType属性来接收一个函数，这个函数用来渲染TabControl组件内部的子组件，itemType属性的值是一个函数，这个函数接收一个参数，这个参数就是TabControl组件内部的子组件，然后通过itemType属性的值来渲染TabControl组件内部的子组件。

TabControl组件

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

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

export class TabControl extends Component {
    constructor(){
        super()
        
        this.state = {
            currentIndex:0
        }
    }
    
    itemClick(index){
        // 1.自己保存最新的index
        this.setState({currentIndex:index})
        // 2.让父组件执行对应的函数
        this.props.tabClick(index)
    }
    
    render(){
        const { titles,itemType } = this.props
        const { currentIndex } = this.state
        
        return (
            <div className="tab-control">
                {
                    titles.map((item,index)=>{
                        return (
                            <div
                             className={`item ${index === currentIndex?"active":''}`} 
                             key={item} onClick={e => this.itemClick(index)}>
                                {/* <span className='text'>{item}</span> */}
                                {itemType(item)}
                             </div>
                        )
                    })
                }
            </div>
        )
    }
}

export default TabControl;

以上代码中，TabControl组件内部通过itemType属性来接收一个函数，这个函数用来渲染TabControl组件内部的子组件，itemType属性的值是一个函数，这个函数接收一个参数，这个参数就是TabControl组件内部的子组件，然后通过itemType属性的值来渲染TabControl组件内部的子组件。
这里我们需要注意看itemClick方法，这个方法用来处理TabControl组件内部的子组件的点击事件，这个方法内部首先保存最新的index，然后让父组件执行对应的函数。

结尾

作用域插槽的使用场景: 当组件的内容是动态的，但是组件的样式是固定的，这时候可以使用作用域插槽，将动态的内容传递给组件，组件内部使用插槽渲染，这样就可以实现组件的复用。接着我们附上效果图：

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