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. 很受欢迎的Linux笔记（短小精悍）

    http://blog.csdn.net/xsl1990/article/details/8274028 如何知道所使用的LINUX是哪个发行版? lsb_release -a 查找某个文件的另类方法 ...

  2. CP_THREAD_ACP与CP_ACP

    在使用MultiByteToWideChar的时候,大部分都知道上述两个参数,MSDN上的解释也是简单到极致.通常我们会选择使用CP_ACP,但是总有人会在没有真正明白它们之间的区别前使用CP_THR ...

  3. IOS开发中单例模式使用详解

    第一.基本概念 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例类的特殊类.通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问. 第二.在IOS中使用单例模式的情 ...

  4. Covariance and Contravariance in C#, Part Two: Array Covariance

    http://blogs.msdn.com/b/ericlippert/archive/2007/10/17/covariance-and-contravariance-in-c-part-two-a ...

  5. 免安装oracle驱动访问数据库

    try { string connStr = "Data Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=192.168.110.110)( ...

  6. BZOJ_1016_[JSOI2008]_最小生成树计数_(dfs+乘法原理)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1016 给出一张图,其中具有相同权值的边的数目不超过10,求最小生成树的个数. 分析 生成树的计 ...

  7. SCOI2007排列perm

    1072: [SCOI2007]排列perm Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 805  Solved: 497[Submit][Stat ...

  8. [HDU 5029] Relief grain

    Relief grain Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 100000/100000 K (Java/Others)T ...

  9. C# #if DEBUG

    首先,大小写不能写错,其次,解决方案配置设为:Debug,才会执行该语句,如果在条件里面搭配Debug.Assert等,效果甚佳.而如果要设置为Release模式,就不会执行条件语句中的内容,有时候可 ...

  10. Android Matrix用法

    Matrix,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 首先介绍一下矩阵运算.加法和减法就不用说了,太简单了,对应位相加就好.图像处理,主要用到的是乘法 ...