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. spi详解

    来源:https://www.sohu.com/a/211324861_468626 1. SPI简介 SPI,是英语Serial Peripheral interface的缩写,顾名思义就是串行外围 ...

  2. 【C语言】预处理、宏定义、内联函数 _

    一.由源码到可执行程序的过程 1. 预处理: 源码经过预处理器的预处理变成预处理过的.i中间文件   1 gcc -E test.c -o test.i 2. 编译: 中间文件经过编译器编译形成.s的 ...

  3. C++ | 程序编译连接原理

    文章目录 预编译(生成*.i文件) 编译(生成*.s文件) 汇编(生成*.o文件,也叫目标文件) 链接(生成*.exe文件,也叫可执行文件) 汇编--目标文件 查看文件头 查看符号表 查看 .o 文件 ...

  4. pandas数据读取

    02. Pandas读取数据 本代码演示: pandas读取纯文本文件 读取csv文件 读取txt文件 pandas读取xlsx格式excel文件 pandas读取mysql数据表 1.读取纯文本文件 ...

  5. c、c++中-int型以float或者float型以int输出问题

    1.将浮点型以整形的类型输出问题 用VC6.0,会把以整形输出形式的浮点数输出为0: 1 #include"stdio.h" 2 int main() 3 { 4 float x= ...

  6. AMS分析 -- 启动过程

    一. AMS简介 AmS可以说是Android上层系统最核心的模块之一,其主要完成管理应用进程的生命周期以及进程的Activity,Service,Broadcast和Provider等. 从系统运行 ...

  7. java中类变量和实例变量的实质区别?

    类变量和实例变量的区别 相对于static(静态的)或说类的, 本章开始提到的都是instance(实例的)或说对象的. 每个对象都有自己的一份儿对象域或实例域,相互之间没关系, 不共享. 我们可以从 ...

  8. Thread中,run方法和start方法的区别

    1. 通过调用Thread类中的start()方法可以启动一个线程,但是线程并不是立刻运行,而是处于就绪态,一旦获取cpu时间片,则会立即运行run()方法 2. start()方法实现了多线程运行, ...

  9. CommonsCollection7反序列化链学习

    CommonsCollections7 1.前置知识 Hashtable Hashtable实现了Map接口和Serializable接口,因此,Hashtable现在集成到了集合框架中.它和Hash ...

  10. 简易table form梳理

    <!--      A:表格-table    <双标签,day3上午第一次接触>         作用:显示信息     一:table简易案例:         <tabl ...