好客租房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 ...
随机推荐
- CSS系列——浏览器默认样式
了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...
- ES6-11学习笔记--async,await
基于Generator异步编程语法糖:async await async默认输出Promise对象 将异步的代码以同步的方式书写,提高代码可阅读性 基本使用: function timeout() ...
- EF框架基础
ORM概述: ORM全称是"对象 - 关系映射" . ORM是将关系数据库中的数据用对象的形式表现出来,并通过面向对象的方式将这些对象组织起来,实现系统业务逻辑的过程. Entit ...
- java中如何能把一个字符串转成日期对象
题目3.1: 把一个字符串转成日期对象 当我们想根据输入字符串得到一个日期对象时我们不知道,应该以什么格式写这个字符串,才能被系统正确解析,一种聪明的做法是,马克-to-win,我们先 把日期对象根据 ...
- 前端如何通过js判断浏览器的类型(忽略版本)web html css javascript
每个页面浏览器会实例出一个window对象,在window对象下有一个属性navigator,navigator本身是一个对象,navigator对象上有一个属性userAgent里面包含了当前浏览器 ...
- SLF4J 报错解决:No SLF4J providers were found
1.解决SLF4J报错 我们在自己的项目中使用了SLF4J,或者引入了某开源项目时,他的项目中用了SLF4J,运行时会报如下的错误: SLF4J: Failed to load class " ...
- JavaSSM-总结
Spring框架技术 SSM(Spring+SpringMVC+Mybatis)阶段的学习,也算是成功出了Java新手村. 前面我们已经学习过Mybatis了. 从这里开始,很多的概念理解起来就稍微有 ...
- Python 每日提醒写博客小程序,使用pywin32、bs4库
死循环延迟调用方法,使用bs4库检索博客首页文章的日期是否与今天日期匹配,不匹配则说明今天没写文章,调用pywin32库进行弹窗提醒我写博客.
- OpenHarmony 3.1 Beta 版本关键特性解析——ArkUI canvas组件
(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 江英杰 华为技术有限公司 canvas 是 ArkUI 开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活. ...
- 防抖-小程序-input输入频繁时搜索出bug
html: <input type="text" class="input_search" placeholder="搜索周边店铺" ...