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 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏

作者: 小枫枫, 转载或复制请以 超链接形式 并注明出处 小枫枫不疯喔
原文地址: 《react中组件如何使用“插槽”》 发布于2021-6-2

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏