好客租房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 ...
随机推荐
- Visual Studio Code 快捷键大全(最全)
Visual Studio Code 是一款优秀的编辑器,对于开发前端带来了很多便利,熟悉快捷键的使用,能够起到事半功倍的作用,提高工作效率.下面就Visual Studio Code常用快捷键的一些 ...
- C++大作业——教职工管理系统
教职工信息管理系统 1.问题描述: 设计一个学校职工管理系统,要求实现如下功能:建立职工信息数据, 包括职工编号.姓名. 性别.工资.出生时间.岗位.参加工作时间和年 龄(必须计算得到),初始模拟数据 ...
- 内网穿透系列-Go语言
一.介绍 软件在KCP出现后进行了重构,将其底层UDP支持替换为了KCP,使其效率大大提高,在某些恶劣的网络环境下依旧能有不错的效果.当然,它也是支持TCP模式的,另外它也是支持加密的,在P2P打洞失 ...
- 开发一个自己的 CSS 框架(四)
这一节,我们来讲规矩,谈网格,做人可以不要脸,不讲规矩,不讲道理(特指傲娇兽),但底线还是要有的,如同网格一样,不能超出. jeet 这里我们别人封装好的模块,不过呢,我们也会详细介绍一下原理.首先我 ...
- 用jq实现移动端滑动轮播以及定时轮播效果
Html的代码: <div class="carousel_img"> <div class="car_img" style="ba ...
- 解决vue-cli项目在运行时控制台出现 [WDS] Disconnected! 错误
在项目运行时 控制台输入 npm run dev 后浏览器出现该项目页面,但是出现了[WDS] Disconnected!错误 虽然有时并不影响,但是作为一名合格的程序员 我们还是尽量将其修复,以免将 ...
- 《头号玩家》AI电影调研报告(五)
4.VR自由行走跑步机 电影中,它可以让玩家朝任意方向无限奔跑并保持在平台最中央,还可以模拟上台阶和走斜坡的情况.而下面这件VR跑步装备,可以让你在游戏世界穿行自如. 奥地利创意公司Cyberith公 ...
- python并发——生产者消费者信号量实现
介绍 写扫描器的时候,需要让资产扫描结果一出来(生产者),另外一边就会开个线程去运行漏洞扫描(消费者). 但是又不能让结果没出来,另外一边消费者就开始干活了. 代码 # *coding:UTF-8 * ...
- rbac介绍、自动生成接口文档、jwt介绍与快速签发认证、jwt定制返回格式
今日内容概要 RBAC 自动生成接口文档 jwt介绍与快速使用 jwt定制返回格式 jwt源码分析 内容详细 1.RBAC(重要) # RBAC 是基于角色的访问控制(Role-Based Acces ...
- Hadoop安装部署
Hadoop伪分布式搭建 1.准备Linux环境 ①开启网络,ifconfig指令查看ip ②修改主机名为自己名字(hadoop) vim /etc/sysconfig/network NETWORK ...