好客租房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

相关文章
|
JavaScript 前端开发 容器
|
前端开发 JavaScript
好客租房68-render-props模式-4children代替
好客租房68-render-props模式-4children代替
85 0
好客租房68-render-props模式-4children代替
|
前端开发 JavaScript
好客租房66-render-props模式-2使用模式
好客租房66-render-props模式-2使用模式
95 0
好客租房66-render-props模式-2使用模式
|
前端开发 JavaScript
好客租房67-render-props模式-3演示mouseover的组件的复用
好客租房67-render-props模式-3演示mouseover的组件的复用
104 0
好客租房67-render-props模式-3演示mouseover的组件的复用
好客租房112-tab.item页面重
好客租房112-tab.item页面重构
90 0
好客租房112-tab.item页面重
|
前端开发 JavaScript
React关于constructor与super(props)之间的相爱相杀
我们先把菜鸟教程的一段代码拿过来分析一下。下面这段代码是用了将生命周期方法添加到类中实现时钟效果
React关于constructor与super(props)之间的相爱相杀
|
前端开发
好客租房57-props深入(4props的默认值)
好客租房57-props深入(4props的默认值)
91 0
好客租房73-4传递props
好客租房73-4传递props
75 0
|
前端开发
好客租房56-props深入(3props校验-约束规则)
好客租房56-props深入(3props校验-约束规则)
94 0
|
前端开发 数据格式
好客租房55-props深入(2props校验)
好客租房55-props深入(2props校验)
83 0