The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship.

When one component renders another component, this is what React refers to as the "owner-ownee relationship," where the parent component is also called a "composite component."

We are going to create a component call 'Widget' which will be used inside our 'React_app' component.

'Widget' doesn't have any state, all it has is from 'React_app' pass into it.

<Widget update={this.myUpdate} name={this.state.name}></Widget>

Example:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>React Lesson 4: Onwer - Ownee</title>

</head>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>

<script type="text/jsx">

    var React_app = React.createClass({

        getInitialState: function() {

            return {

                name: "Joe"

            }

        },

        myUpdate: function(e){

            this.replaceState({name: e.target.value});

        },

        render: function() {

            return (

                 <div>

                     <Widget update={this.myUpdate} name={this.state.name}></Widget>

                     <Widget update={this.myUpdate} name={this.state.name}></Widget>

                     <Widget update={this.myUpdate} name={this.state.name}></Widget>

                     <Widget update={this.myUpdate} name={this.state.name}></Widget>

                     <Widget update={this.myUpdate} name={this.state.name}></Widget>

                 </div>

            );

        }

    });

    var Widget = React.createClass({

        render: function(){

            return (

                    <div>

                        Your name: <input type="text" onChange={this.props.update}/>

                        <h1>{this.props.name}</h1>

                    </div>

            )

        }

    });

    React.render(<React_app />, document.body);

</script>

</body>

</html>

[React] React Fundamentals: Owner Ownee Relationship的更多相关文章

  1. [React Fundamentals] Owner Ownee Relationship

    The owner-ownee relationship is used to designate a parent-child relationship with React components ...

  2. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  3. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  4. React/React Native 的ES5 ES6写法对照表－b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  5. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  6. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  7. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

  8. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

  9. [React] React Fundamentals: Accessing Child Properties

    When you're building your React components, you'll probably want to access child properties of the m ...

随机推荐

  1. ElasticSearch大数据分布式弹性搜索引擎使用—从0到1

    阅读目录: 背景 安装 查找.下载rpm包 .执行rpm包安装 配置elasticsearch专属账户和组 设置elasticsearch文件所有者 切换到elasticsearch专属账户测试能否成 ...

  2. 开源的文件比较工具：WinMerge,KDiff3,diffuse

    为了寻找免费的BeyondCompare的替代品,最后经过实用,找到如下一些: 1.diffuse 感受:如果仅仅是比较两个文本类的文件,这个软件也就够用了. 安装好后,对着文件点击右键,会出现&qu ...

  3. 先贴出代码C++ 中的单例模式

    先贴出代码,代码后面是讲解 自己编写的单例模式: #include <iostream> #include <stdio.h> #include <string> ...

  4. PHP 'ext/gd/gd.c' gdImageCrop整数符号错误漏洞

    漏洞版本: PHP 5.5.x 漏洞描述: CVE ID:CVE-2013-7328 PHP是一种HTML内嵌式的语言. PHP 'ext/gd/gd.c' gdImageCrop函数存在多个整数符号 ...

  5. 在Eclipse中使用Github（EGit）

    安装配置EGit 1. 安装Windows版的Git,登陆Github账号,登陆成功后会自动在本地和Github配置好密钥 2. 在Eclipse中安装EGit,地址http://download.e ...

  6. 嵌入式开发软件环境：uboot、kernel、rootfs、data布局分析

    uboot+linux的整体方案 开发板的datasheet中都有详细的地址空间的划分,其中比较重要的两块是:DDR地址空间和Flash地址空间.DDR空间是系统和应用的运行空间,一般由linux系统 ...

  7. 使用PowerDesigner建立数据库模型

    转自:http://www.cnblogs.com/tonyepaper/archive/2008/02/12/1067260.html 1.       打开PowerDesigner,点击File ...

  8. date命令--修改linux系统时间

    在linux环境中,不管是编程还是其他维护,时间是必不可少的,也经常会用到时间的运算,熟练运用date命令来表示自己想要表示的时间,肯定可以给自己的工作带来诸多方便. 1．命令格式: date [参数 ...

  9. CLR via C# 读书笔记 6-2 不同AppDomain之间的通信 z

    跨AppDomain通信有两种方式 1.Marshal By reference : 传递引用 2.Marshal By Value : 把需要传递的对象 通过序列化反序列化的方式传递过去(值拷贝) ...

  10. 速冻熟食制品的QS的申请办法

    QS审核流程许可证申办程序食品生产加工企业按照下列程序申请获得食品生产许可证:1.食品生产加工企业按照地域管辖和分级管理的原则,到所在地的市(地)级以上质量技术监督部门提出办理食品生产许可证的申请:2 ...