react中组件如何使用“插槽”

import React, { Component } from 'react'

export default class Demo extends Component {
    render() {
        return (
            <div>
                {/* render接受到A组件传来的参数  return B组件时候 当做标签属性传给B组件 */}
                <A render={(msg) => <B msg={msg} />}>
                </A>
            </div>
        )
    }
}
// 定义组件A
class A extends Component {
    state = {
        msg: '诶嘿'
    }
    render() {
        let { msg } = this.state
        return (
            <div>
                我是A组件
                {//  将数据当做参数传给render
                    this.props.render(msg)  
                }
            </div>
        )
    }
}
// 定义组件B
class B extends Component {
    render() {
        console.log(this.props); //输出 :  {msg: "诶嘿"}
        return (
            <div>
                我是B组件
            </div>
        )
    }
}

本文最后更新于2021-6-2，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！