栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

什么是{this.props.children}?何时使用?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

什么是{this.props.children}?何时使用?

“孩子”到底是什么?

React文档说,您可以

props.children
在代表“通用框”并且不提前知道其子级的组件上使用。对我来说,这并没有真正清除一切。我可以肯定的是,这个定义很合理,但对我而言却不是。

我对操作的简单解释

this.props.children
是, 它用于在调用组件时显示在开始和结束标记之间包含的所有内容。

一个简单的例子:

这是用于创建组件的无状态函数的示例。同样,由于这是一个函数,因此没有

this
关键字,因此只需使用
props.children

const Picture = (props) => {  return (    <div>      <img src=https://www.mshxw.com/skin/sinaskin/image/nopic.gif      {props.children}    </div>  )}

此组件包含一个

<img>
正在接收一些内容的
props
,然后显示
{props.children}

每当调用此组件

{props.children}
时,也会显示该组件,这仅是对该组件的开始和结束标记之间的引用。

//App.jsrender () {  return (    <div className='container'>      <Picture key={picture.id} src=https://www.mshxw.com/skin/sinaskin/image/nopic.gif          //what is placed here is passed as props.children        </Picture>    </div>  )}

<Picture />
如果调用该组件将完全打开和关闭标签
<Picture></Picture>
,则无需使用自动关闭标签来调用该组件,而是可以在其之间放置更多代码。

这将

<Picture>
组件与其内容分离开来,并使其更可重用。

参考:React的props.children快速入门



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/415595.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号