children属性

表示组件标签的子节点 当组件标签有子节点是 props就会有该属性

props中的组件可以是任意属性 都是可以渲染的

//导入react
    import React from 'react'
    import ReactDOM from 'react-dom'
     
    //导入组件
    // 约定1:类组件必须以大写字母开头
    // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
    // 约定3:组件必须提供render方法
    // 约定4:render方法必须有返回值
    const {Provider,Consumer}=React.createContext()
     
    const App=props=>{
        return (
            <div>
                <h1>组件标签的子节点</h1>
                {props.children}
            </div>
        )
    }
     
     
     
    ReactDOM.render(<App>我是子节点</App>, document.getElementById('root'))

运行结果

好客租房54-props深入(children属性)的更多相关文章

  1. 【JAVASCRIPT】React学习-巧用 props 的 children 属性实现内容填充

    背景 平常写组件,经常遇到需要获取内容放入组件内部的情形. 实现方法 我们有两种实现方式 1. 自定义 props render 的时候通过获取 this.props.content 填充到组件内部 ...

  2. JavaEE在职加薪课好客租房项目实战视频教程

    JavaEE在职加薪课好客租房项目实战视频教程课程介绍:       本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...

  3. java构建树形列表(带children属性)

    一些前端框架提供的树形表格需要手动构建树形列表(带children属性的对象数组),这种结构一般是需要在Java后台构建好. 构建的方式是通过id字段与父id字段做关联,通过递归构建children字 ...

  4. 第七章 路由 77 路由-使用children属性实现路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. Vue学习笔记【28】——Vue路由(使用 children 属性实现路由嵌套)

    使用 children 属性实现路由嵌套   <div id="app">    <router-link to="/account"> ...

  6. 好客租房48-组件的props(基本使用)

    组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props ...

  7. 好客租房49-组件的props(特点)

    特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...

  8. 好客租房55-props深入(2props校验)

    对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-typ ...

  9. 好客租房56-props深入(3props校验-约束规则)

    1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react ...

随机推荐

  1. volist标签的各种属性

    volist标签通常用于查询数据集(select方法)的结果输出,通常模型的select方法返回的结果是一个二维数组,可以直接使用volist标签进行输出. 在控制器中首先对模版赋值: $User = ...

  2. 记一次曲折的CVE-2018-1270复现分析

    前言 前两天接到朋友对某个授权目标的漏扫结果,也算是初次接触到这个漏洞,就想着顺手分析一下复现一下,因为分析这个漏洞的文章也比较少,所以刚开始比较迷,进度也比较慢. 漏洞复现 使用vulhub搭建环境 ...

  3. c++实现中介者模式--虚拟聊天室

    内容: 在"虚拟聊天室"实例中增加一个新的具体聊天室类和一个新的具体会员类,要求如下: 1. 新的具体聊天室中发送的图片大小不得超过20M. 2. 新的具体聊天室中发送的文字长度不 ...

  4. 【Android开发】Android 删除指定文件和文件夹

    /** * 删除单个文件 * @param filePath 被删除文件的文件名 * @return 文件删除成功返回true,否则返回false */ public boolean deleteFi ...

  5. TextView显示html样式的文字

    项目需求: TextView显示一段文字,格式为:白雪公主(姓名,字数不确定)向您发来了2(消息个数,不确定)条消息 这段文字中名字和数字的长度是不确定的,还要求名字和数字各自有各自的颜色. 一开始我 ...

  6. js new Date()参数格式

    最近在写页面使用new Date()获取时间戳在ie浏览器中测试发现无效:后来发现是参数格式问题, new Date()参数格式如下: 1.用整数初始化日期对象 var date1 = new Dat ...

  7. JavaScript学习总结2-对象

    JavaScript中对象除了最后一个属性以外都在结尾加逗号,同时所有属性都要在{ }内 1 <!DOCTYPE html> 2 <html lang="en"& ...

  8. SSM整合_年轻人的第一个增删改查_查找

    写在前面 SSM整合_年轻人的第一个增删改查_基础环境搭建 SSM整合_年轻人的第一个增删改查_查找 SSM整合_年轻人的第一个增删改查_新增 SSM整合_年轻人的第一个增删改查_修改 SSM整合_年 ...

  9. Python paho-mqtt使用心得

    一.概述 一)基本概念 使用回调处理从MQTT代理返回的数据,要使用回调需要先定义回调函数然后将其指派给客户端实例(client). 例如: # 定义一个回调函数 def on_connect(cli ...

  10. mosquitto服务器的安装以及mqtt.fx软件的使用

    一.MQTT描述 MQTT 全称为 Message Queuing Telemetry Transport(消息队列遥测传输)是一种基于发布/订阅范式的"轻量级"消息协议,由 IB ...