zoukankan      html  css  js  c++  java
  • react中类似vue的插槽this.props.children的用法

    父组件

     <TestHanderClick bg="blue">
            <p> 如果我要显示的话,父组件是双标签,子组件中有this.props.children</p>
            <div>类似于匿名插槽</div>
      </TestHanderClick>
    

    子组件

    import React, { Component } from "react";
    import "./base.css"
    
    
    // 父组件
    export class TestHanderClick extends Component {
      //  static defaultProps是默认的写法,人家规定这样写的,你的默认值
      static defaultProps={
        bg:"pink",
        wi:"400px",
        he:"200px"
      }
    
      render() {
        return (
          // 使用值
          <div style={{  background: this.props.bg,  this.props.wi,  height:this.props.he  }}>
            123
            {this.props.children}
             //通过这个组件,可以获取父组件中的数据
          </div>
        )
      }
    }
    
    export default TestHanderClick;
    
    

    作者:流年少年
    出处:https://www.cnblogs.com/ishoulgodo/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    元素模式
    完美C++(第5版)(双色)
    ASP.NET Web API 2框架揭秘
    跨终端 Web
    WebKit技术内幕
    云计算时代——本质、技术、创新、战略
    互联网创业密码
    Netty权威指南
    Robot Framework 学习笔记(二)-------第一个脚本
    Robot Framework学习笔记(一)------环境搭建
  • 原文地址:https://www.cnblogs.com/ishoulgodo/p/13526636.html
Copyright © 2011-2022 走看看