好客租房54-props深入(children属性)
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属性)的更多相关文章
- 【JAVASCRIPT】React学习-巧用 props 的 children 属性实现内容填充
背景 平常写组件,经常遇到需要获取内容放入组件内部的情形. 实现方法 我们有两种实现方式 1. 自定义 props render 的时候通过获取 this.props.content 填充到组件内部 ...
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- java构建树形列表(带children属性)
一些前端框架提供的树形表格需要手动构建树形列表(带children属性的对象数组),这种结构一般是需要在Java后台构建好. 构建的方式是通过id字段与父id字段做关联,通过递归构建children字 ...
- 第七章 路由 77 路由-使用children属性实现路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue学习笔记【28】——Vue路由(使用 children 属性实现路由嵌套)
使用 children 属性实现路由嵌套 <div id="app"> <router-link to="/account"> ...
- 好客租房48-组件的props(基本使用)
组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props ...
- 好客租房49-组件的props(特点)
特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...
- 好客租房55-props深入(2props校验)
对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-typ ...
- 好客租房56-props深入(3props校验-约束规则)
1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react ...
随机推荐
- 【C语言】预处理、宏定义、内联函数
一.由源码到可执行程序的过程 1. 预处理: 源码经过预处理器的预处理变成预处理过的.i中间文件 1 gcc -E test.c -o test.i 2. 编译: 中间文件经过编译器编译形成.s的汇编 ...
- 2022首场MASA技术团队黑客松赛事大赛完美落幕!精彩集锦
Masa技术团队在2021年创立,这一年我们团队发布了我们第一个产品,Masa Blazor.登上了.NET Conf China,我们承诺,开源我们的产品,为开源社区增砖加瓦,一路上收获技术社区文章 ...
- jboss学习4-jboss7开发配置指南
1 Jboss7下载与安装1.1 官方下载路径:http://www.jboss.org/jbossas/downloads,目前最新稳定版本为7.1.1 final,分别有zip和 ...
- EFCore 6.0入门看这篇就够了
前言 作为一直在dotNet行业耕耘的码农,这几年在大大小小项目中也涉及到了许多ORM框架,比如:EFCore,Dapper,NHibernate,SqlSugar等等,这些ORM都有各自的优缺点,大 ...
- 帝国cms随机调用信息
我们知道,帝国cms随机调用标签是 [ecmsinfo]1,5,32,0,0,2,0,",'rand()'[/ecmsinfo] 但是这种调用方式在数据量特别大的时候严重影响生成速度,对于中 ...
- tomcat的搭建和介绍
第19章 tomcat的搭建 19.1 tomcat学习之前的预备知识 19.1.1 什么是JVM和JDK,JRE JVM java虚拟机,实现一份代码可以在不同的平台执行,具有 ...
- Vue.js Mixins 混入使用
Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...
- PyTorch环境配置
PyTorch环境配置 本文档用于记录PyTorch环境配置过程中的要点. PyTorch环境配置 安装Miniconda 安装PyTorch 配置远程开发工具 基于CUDA的张量 导入警告问题 参考 ...
- k8s入门之Service(六)
将一组pod公开为网络服务,通过service代理,可以实现负载均衡 一.ClusterIP 此方式只能在集群内访问 1.使用命令暴露已存在的pod (1)继续使用前面章节的案例,查看名称为nginx ...
- 关于 background-image 渐变gradient()那些事!
大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...