文档章节

react children

o
 osc_1exndt1e
发布于 2018/12/12 20:13
字数 379
阅读 11
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

children

react 中,属性名是一一对应的,除了children。

对于一个组件来说,其this.props.children拿到的是什么呢???举个🌰

<Grid>
  <Row />
  <Row />
  <Row />
</Grid>

// 在Grip中,拿到的children就是三个Row

注意:任何东西,都可以作为children, 举例:

<Grid>
  Here is a row:
  <Row />
  Here is another row:
  <Row />
  {() => <h1>Hello World!</h1>}
</Grid> // 字符串 和<Row>, 甚至最后一个箭头函数 都是Grid的children

我的使用举例:

// 场景是,每个页面都有一个title,这个title都有一样的样式,但是里面文字不一样,或者有些多个button 等待,因此,我写了一个Title的组件,这个组件我用css文件,设置了样式。这样实现了,我在一个地方设置样式,这样传入不同文字显示就行了。
// 不需要每一个页面里都写样式了。
// Title组件 export default class Title extends React.Component { render() { return ( <div className='title'> {this.props.children} </div> ) } } // 页面中的使用:
render() {return ( <div className='my_indicator_container'> <Title> 我的指标 <Button type="primary" onClick={this.handleClick} style={{ float: 'right' }}>指标登记</Button> </Title> </div> ) }

// 第二个页面:
return (
  <div className='adhocContainer'>
    <Title>
      Ad-hoc
      <Popover content={content} placement='right' trigger='hover' style={{ marginLeft: 16 }}>
        <Icon name='problem-circle-o' style={{ fontSize: '18px' }} />
      </Popover>
    </Title>
  </div>
)
 
// 是不是很方便啊,开心脸~

我的使用很方便,react提供了很多操纵children的方法:

循环:React.Children.map 以及 React.Children.forEach 

计数: React.Children.count 栗子:

  render() {
    return <p>React.Children.count(this.props.children)</p>
  }

转换为数组(如果你需要排序): React.Children.toArray

class Sort extends React.Component {
  render() {
    const children = React.Children.toArray(this.props.children)
    // Sort and render the children
    return <p>{children.sort().join(' ')}</p>
  }
}

 

参考文章: https://segmentfault.com/a/1190000011527160

o
粉丝 3
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
手把手教你在Windows下搭建React Native Android开发环境

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考。(我都是参考官方文档的) react-native...

Common1140
2015/12/24
1.1W
45
React Native iOS环境搭建

感觉React Native会越来越多的公司开始研究、使用。所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下。 废话不多说了,下面简单的列出步骤吧。 1. 安装Homebrew Home...

mahb520
2015/11/30
4.1K
5
H5、React Native、Native应用对比分析

H5、React Native、Native应用对比分析 离上次在北京开源中国盛典已经快一个月了,有点想念@oschina的小伙伴了。我必须承认oschina是国内最大的同性社交网站,这也是无可争议的事实,但是,我...

vczero
2016/01/05
2.7W
48
踩坑之路:史上最详细Windows版本搭建安装React Native环境配置

本文基于已有博客,记录个人踩坑: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8......

滴滴丶哔哔
2016/05/29
721
1
前端最新技术学习地址总结

主流技术官网总结 1.1. 工具类 Glup 官网:http://www.gulpjs.com.cn/ http://i5ting.github.io/stuq-gulp/#10202 Webpack 官网:http://webpack.js.org GitBook:http://fakefish.github.io/r......

龙马行空
2016/01/14
1.9K
1

没有更多内容

加载失败,请刷新页面

加载更多

汇总你在 Linux 上的命令使用情况

使用合适的命令,你可以快速了解 Linux 系统上使用的命令以及执行的频率。 汇总 Linux 系统上使用的命令只需一串相对简单的命令以及几条管道将它们绑定在一起。当你的历史记录缓冲区保留了最...

osc_bvincwvq
38分钟前
14
0
Hacker News 简讯 2020-08-15

最后更新时间: 2020-08-15 07:01 Welders set off Beirut blast while securing explosives - (maritime-executive.com) 焊工在固定炸药的同时引爆了贝鲁特爆炸 得分:383 | 评论:322 Factor......

FalconChen
今天
24
0
OSChina 周六乱弹 —— 老椅小猫秋乡梦 梦里石台堆小鱼

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @小小编辑 :《MOM》- 蜡笔小心 《MOM》- 蜡笔小心 手机党少年们想听歌,请使劲儿戳(这里) @狄工 :腾讯又在裁员了,35岁以上清退,抖音看到...

小小编辑
今天
129
4
构建高性能队列,你不得不知道的底层知识!

前言 本文收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识。 你好,我是彤哥。 上一节,我们一起学习了如何将递归改写为非递归,其中,用到的数据结构主要是栈。 栈和队列...

彤哥读源码
今天
17
0
Anaconda下安装keras和tensorflow

Anaconda下安装keras和tensorflow 一、下载并安装Anaconda: Anaconda下载 安装步骤: 如果是多用户操作系统选择All Users,单用户选择Just Me 选择合适的安装路径 然后勾选这个,自动配置环境...

Atlantis-Brook
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部