【JAVASCRIPT】React学习-巧用 props 的 children 属性实现内容填充
背景
平常写组件,经常遇到需要获取内容放入组件内部的情形。
实现方法
我们有两种实现方式
1. 自定义 props
render 的时候通过获取 this.props.content 填充到组件内部
const content = (<ul><li><span>分析1<span></li><li><span>分析1<span></li></ul>);
<Panel content={content} />
render () {
return (<div>
{this.props.content}
</div>);
}
2. 利用 props 的 children
一般 props 是与用户定义的组件一一对应,但有一个例外 children ,表示组件内部的所有子节点。我们可以利用这个 props 属性,省略自定义content属性,直接获取this.props.children填充入组件。
这种方法的好处在于层级关系明显,因为内部节点有时候会很复杂,如果用自定义props属性,没法很快看清楚节点之间的包含关系。
注意点:
this.props.children 的值有三种可能,处理 this.props.children 的时候要注意判定:
- 1) 如果当前组件没有子节点,是 undefined ;
- 2)如果有一个子节点,数据类型是 object ;
- 3)如果有多个子节点,数据类型就是 array 。
<Panel>
<ul>
<li><span>分析1<span></li>
<li><span>分析1<span></li>
</ul>
</Panel>
render () {
return (<div>
{this.props.children}
</div>);
}
升级版,采用React.Children.map避免掉入this.props.children的坑
<Panel>
<span>分析1<span>
<span>分析1<span>
</Panel>
render() {
return (<div>
<ul>
{
React.children.map(this.props.children, (child)=>{
return (<li>{child}</li>);
});
}
</ul>
</div>);
}
React.children 的方法
官方文档: https://facebook.github.io/react/docs/react-api.html#react.children.map
- React.Children.map(children, function[(thisArg)]) 返回处理后的节点array
- React.Children.forEach(chidlren, function[(thisArg)]) 不返回处理后的节点array,仅遍历节点,多用于处理数据!!!!
- React.chidlren.count(children) 返回children个数
- React.Children.only(children) 仅接受单个节点,超过一个报错
- React.Chidlren.toArray(children) 把dom节点数组话,多用于render时slice节点
【JAVASCRIPT】React学习-巧用 props 的 children 属性实现内容填充的更多相关文章
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- javascript基础学习系列-DOM盒子模型常用属性
最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...
- React学习笔记-04 props
props实现从父组件与子组件的通信. 可以通过getDefaultProps初始化props. React 提供了propsTypes来验证props的类型 官方API: propTypes:fun ...
- 【JAVASCRIPT】React学习-JSX 语法
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 JSX 语法 1. 定义 JSX 是javascript + xml 的合集,我们可以将javascript 与 ht ...
- 【JAVASCRIPT】React学习-如何构建一个组件
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...
- 【JAVASCRIPT】React学习- 数据流(组件通信)
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 一 组件通信如何实现 父子组件之间不存在继承关系 1.1 父=>子通信 父组件可以通过 this.refs.xx ...
- React中的this.props.children
React this.props.children this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性.它表示组件的所有子节点. var ...
- 【JAVASCRIPT】React学习- 与 flux 结合使用
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 与flux 结合使用
- 【JAVASCRIPT】React学习- 杂七杂八
摘要 记录 React 学习中的小细节 setState setState 有一定的时间延迟,如果需要保证 setState 之后执行某些动作,可以采用以下方法 this.setState({ vis ...
随机推荐
- ubuntu 系统 更改屏幕亮度为最大(15级亮度)
历经千辛万苦终于搞定屏幕亮度,现将成果分享如下. 硬件:联想K29 系统:UBUNTU 14.04 一.执行命令 sudo gedit /etc/default/grub 二.更改文本 然后找到 GR ...
- [USACO08NOV]奶牛混合起来Mixed Up Cows
题目描述 Each of Farmer John's N (4 <= N <= 16) cows has a unique serial number S_i (1 <= S_i & ...
- IBM芯片新功能:诊断癌症
治愈任何疾病的最好方法是什么?-------------- 当然是把它扼杀在摇篮里. "早发现早治疗"已经是老生常谈,但要准确监测疾病又谈何容易?不过现在,IBM这枚小小的芯片就能 ...
- java源码学习(五)LinkedList
LinkedList [TOC] 一.定义 public class LinkedList<E> extends AbstractSequentialList<E> imple ...
- Sql函数简单使用
),)) ) as begin ) --如果@nameA 不为空则直接返回@nameA IF @nameA <>'' BEGIN set @lastNameVal = @nameA END ...
- php二进制流文件
<?php $img_file = 'test.png'; // $fp = fopen($img_file, 'rb'); // $content = fread($fp, filesize( ...
- 【Android Developers Training】 69. 视图切换的淡入淡出效果
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- java对mysql的增删改查
-----连接数据库 package connectdb;import java.sql.*;class Dbcon { // 此处连接数据库,独立开一个类,以后操作数据库的每次连接就不用写这么多 p ...
- 【操作教程】利用YCSB测试巨杉数据库性能
一.前言 巨杉数据库(SequoiaDB)是国内第一款新一代文档型分布式数据库,巨杉数据库由巨杉软件完全自主研发,拥有完全自主知识产权,不基于任何其它的开源项目.SequoiaDB数据库是为分布式存储 ...
- java-bootstrap
先来看一段每一个项目都要写的BASH脚本. #!/usr/bin/env bash in start ) ;; stop ) ;; restart ) shift "$0" sto ...