好客租房54-props深入(children属性)

简介: 好客租房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(我是子节点, document.getElementById('root'))


运行结果

图片.png

相关文章
|
2月前
|
JavaScript 前端开发 搜索推荐
快收藏!超实用标签title属性重写,让同事对你刮目相看
【10月更文挑战第1天】快收藏!超实用标签title属性重写,让同事对你刮目相看
108 10
快收藏!超实用标签title属性重写,让同事对你刮目相看
|
前端开发
前端学习笔记202304学习笔记第十天-为todolist声明props属性
前端学习笔记202304学习笔记第十天-为todolist声明props属性
44 0
|
前端开发 JavaScript
好客租房68-render-props模式-4children代替
好客租房68-render-props模式-4children代替
91 0
好客租房68-render-props模式-4children代替
|
前端开发 JavaScript
好客租房66-render-props模式-2使用模式
好客租房66-render-props模式-2使用模式
102 0
好客租房66-render-props模式-2使用模式
|
前端开发 JavaScript
好客租房67-render-props模式-3演示mouseover的组件的复用
好客租房67-render-props模式-3演示mouseover的组件的复用
108 0
好客租房67-render-props模式-3演示mouseover的组件的复用
好客租房112-tab.item页面重
好客租房112-tab.item页面重构
94 0
好客租房112-tab.item页面重
好客租房17-jsx的样式处理
好客租房17-jsx的样式处理
101 0
好客租房17-jsx的样式处理
|
前端开发
好客租房36-表单处理(3受控组件的示例)
好客租房36-表单处理(3受控组件的示例)
82 0
好客租房36-表单处理(3受控组件的示例)
好客租房16-jsx中的列表渲染
好客租房16-jsx中的列表渲染
98 0
好客租房16-jsx中的列表渲染
|
前端开发
好客租房57-props深入(4props的默认值)
好客租房57-props深入(4props的默认值)
94 0

热门文章

最新文章