var Avatar = React.createClass({
  render: function() {
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
      </div>
    );
  }
});

var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});

var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'http://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});

React.render(
  <Avatar username="pwh" />,
  document.getElementById('example')
);

从属关系

  1. 上面例子中,Avatar  拥有 ProfilePic 和 ProfileLink 的实例 , 拥有者 就是给其它组件设置 props 的那个组件
  2. 正式地说, 如果组件 Y 在 render() 方法是创建了组件 X,那么 Y 就拥有 X
  3. 组件不能修改自身的 props - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的关键性原则
  4. 把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的,而父子关系简单来讲就是 DOM 里的标签的关系
  5. 例子中,Avatar 拥有 divProfilePic 和 ProfileLink 实例,div 是 ProfilePic 和 ProfileLink实例的父级(但不是拥有者)

子级

实例化 React 组件时,你可以在开始标签和结束标签之间引用在 React 组件或者 Javascript 表达式:

<Parent><Child /></Parent>

Parent 能通过专门的 this.props.children props 读取子级。

动态子级

如果子组件位置会改变(如在搜索结果中)或者有新组件添加到列表开头(如在流中)情况会变得更加复杂。如果子级要在多个渲染阶段保持自己的特征和状态,在这种情况下,你可以通过给子级设置惟一标识的 key 来区分

  render: function() {
    var results = this.props.results;
    return (
      <ol>
        {results.map(function(result) {
          return <li key={result.id}>{result.text}</li>;
        })}
      </ol>
    );
  }

当 React 校正带有 key 的子级时,它会确保它们被重新排序(而不是破坏)或者删除(而不是重用)。 务必 把 key添加到子级数组里组件本身上,而不是每个子级内部最外层 HTML 上:

/ 错误!
var ListItemWrapper = React.createClass({
  render: function() {
    return <li key={this.props.data.id}>{this.props.data.text}</li>;
  }
});
var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        {this.props.results.map(function(result) {
          return <ListItemWrapper data={result}/>;
        })}
      </ul>
    );
  }
});

// 正确 :)
var ListItemWrapper = React.createClass({
  render: function() {
    return <li>{this.props.data.text}</li>;
  }
});
var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        {this.props.results.map(function(result) {
           return <ListItemWrapper key={result.id} data={result}/>;
        })}
      </ul>
    );
  }
});
  • 也可以传递 object 来做有 key 的子级。object 的 key 会被当作每个组件的 key
  • 要牢记 JavaScript 并不总是保证属性的顺序会被保留。实际情况下浏览器一般会保留属性的顺序,除了 使用 32 位无符号数字做为 key 的属性。
  • 数字型属性会按大小排序并且排在其它属性前面。
  • React 渲染组件的顺序就是混乱。可以在 key 前面加一个字符串前缀来避免:
  render: function() {
    var items = {};
    this.props.results.forEach(function(result) {
      // 如果 result.id 看起来是一个数字(比如短哈希),那么对象字面量的顺序就得不到保证。这种情况下,需要添加前缀,来确保 key 是字符串。
      items['result-' + result.id] = <li>{result.text}</li>;
    });
    return (
      <ol>
        {items}
      </ol>
    );
  }

React 复合组件的更多相关文章

  1. 【04】react 之 复合组件

    1.1.  什么是组件? 前端开发中组件也称为UI组件,组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分.UI组件包含了这样一个或几个具有各自功能的代码段,最终完成了用户界面的表示.R ...

  2. react基础语法(三)组件的创建和复合组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. React: React的复合组件

    一.介绍 不论Web界面是多么的复杂,它都是由一个个简单的组件组合起来实现的,既然会创建一个简单的组件,那么复杂的组件就有了下手的切入点了.现在来实现一个简单的复合组件.一个颜色面板,一共三部分组成. ...

  4. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  5. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  6. Griddle, griddle-react 一个REACT 表格组件

    Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html

  7. React Native组件之Text

    React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...

  8. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  9. reactjs入门到实战(七)---- React的组件的生命周期

    React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他     getInitia ...

随机推荐

  1. 剑指offer —— 二维数组的查找

    1.问题:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 2.思路:只看题目本身 ...

  2. 树链剖分【洛谷P4114】 Qtree1

    P4114 Qtree1 题目描述 给定一棵n个节点的树,有两个操作: CHANGE i ti 把第i条边的边权变成ti QUERY a b 输出从a到b的路径中最大的边权,当a=b的时候,输出0 码 ...

  3. PHP命名空间 namespace 及导入 use 的用法

    命名空间一个最明确的目的就是解决重名问题,PHP中不允许两个函数或者类出现相同的名字,否则会产生一个致命的错误.这种情况下只要避免命名重复就可以解决,最常见的一种做法是约定一个前缀. 在PHP中,出现 ...

  4. Python判断字符串编码以及编码的转换

    转自:http://www.cnblogs.com/zhanhg/p/4392089.html Python判断字符串编码以及编码的转换 判断字符串编码: 使用 chardet 可以很方便的实现字符串 ...

  5. lambda函数/排序/filter/map

    1.lambda 匿名函数 zrf = lambda x:x**2 ret = zrf(10) #这里面实际上还是有函数名 print(ret) 2.sorted 排序(list也自带排序功能) 排序 ...

  6. [NodeJS]exit code

    NodeJs 如何返回exit Code code =1; process.emit("exit ") process.reallyExit(code);

  7. partial、struct、interface与C#和CLR的关系

    partial.struct.interface是C#编译器特有的,CLR对此一无所知.

  8. C/C++中qsort()以及sort()的用法

    最近学弟们问快速排序的比较多,今天自己就做一下总结,快速排序在库函数里面有现成的,不用自己实现,调用一下就可以达到自己想要的结果,掌握以后就可以完全摒弃冒泡和选择了,并且时间复杂度也从O(n*n)提升 ...

  9. ajax加载菊花loading效果

    Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...

  10. Jenkins自动化CI CD流水线之5--pipeline

    一.概览 二.安装 在对jenkins进行初始化安装时,默认已经安装了jenkins的相关插件,如下图所示: 三.实操 新建任务: 编写pipeline脚本: 我们可以借助流水线语法去做. test流 ...