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. DHTMLX 前端框架 建立你的一个应用程序 教程(五)--添加一个表格Grid

    表格例子 样本如下: 我们这篇介绍的是dhtmlxGrid  组件. 它支持4种数据格式:XML, JSON, CSV, JSArray. 添加表格到布局的单元格中去: 1.使用attachGrid( ...

  2. 第八章CDC设备

    8.1 CDC设备介绍 USB的CDC类是USB通信设备类(Communication Device Class)的简称.CDC类是USB组织定义的一类专门给各种通信设备(电信通信设备和中速网络通信设 ...

  3. C# SerialPort的简单使用

    SerialPort中串口数据的读取与写入有较大的不同.由于串口不知道数据何时到达,因此有两种方法可以实现串口数据的读取.一.线程实时读串口:二.事件触发方式实现.由于线程实时读串口的效率不是十分高效 ...

  4. 使用GDI+ DrawDriverString实现行距及字符间距控制

    主要是要将一个标题和几段文字绘制到固定大小的图片上,如果一张放不下就生成多张.在使用DrawString是发现无法控制行距 namespace TibetTest {     public class ...

  5. 常用的Web服务器

    常用的Web服务器有IIS.Apache.Tomcat.Jboss.Resin.Weblogic.WebSpher IISIIS服务是Windows产品自带的一种免费的Web服务器,安装配置简单,主要 ...

  6. 宣布发布长期保留 Azure Backup功能

    Shreesh Dubey 云 + Enterprise首席项目经理 此前我们已宣布为DPM云备份提供长期保留功能.随着本月 Azure Backup 服务的发布,我们将此功能扩展到云备份目前支持 ...

  7. 【转】ubuntu 11.10（32位系统）下编译android源码

    原文网址:http://www.cnblogs.com/dwayne/archive/2011/11/16/2251734.html 本文介绍在ubuntu 11.10系统下编译android 2.3 ...

  8. Eclipse工具使用技巧总结

    首先推荐一篇非常好的How to use eclipse文章 ,讲的是eclipse使用的方方面面,非常实用,推荐给大家! 一.常用快捷键:Ctrl+F11 运行Ctrl+Shift+/ 在代码窗口中 ...

  9. CONTAINING_RECORD 宏

    Windows中提供了一个宏 #define CONTAINING_RECORD (address, type, field ) ((type *)( \ (PCHAR)(address ) - \ ...

  10. Robotium 系列（1）

    之前也写过一些blog,可是没什么坚持.这个系列算是对之前工作的一个总结和提高:也与大家共同进步! 本文主要介绍的内容是: 1. 软件测试的基本概念 2. 自动化测试的概念 3. 手动测试和自动化测试 ...