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. SPRING IN ACTION 第4版笔记-第五章BUILDING SPRING WEB APPLICATIONS-004-以query parameters的形式给action传参数(@RequestParam、defaultValue)

    一. 1.Spring MVC provides several ways that a client can pass data into a controller’s handler method ...

  2. Cppcheck 用法（上篇）

    http://blog.csdn.net/u011012932/article/details/52778149

  3. Form.block Trigger DML常规写法

    Block的数据源是View的,如果想操作数据,需要注意在以下几个Trigger里面写代码: 一般建议创建View的时候包含rowid字段. on-lock: select inventory_ite ...

  4. MapReduce 模式、算法和用例（MapReduce Patterns, Algorithms, and Use Cases)

    在新文章“MapReduce模式.算法和用例”中,Ilya Katsov提供了一个系统化的综述,阐述了能够应用MapReduce框架解决的问题. 文章开始描述了一个非常简单的.作为通用的并行计算框架的 ...

  5. puTTY与SecureCRT的比较

    从网上看到别人对这两个工具的比较:从windows访问linux,除了samba之外,日常操作用得最多的大概就是PuTTY和SecureCRT Putty是免费的,SecureCRT是收费的(当然,有 ...

  6. C#开发漂亮的数字时钟

    今天用C#做了一个漂亮的数字时钟.界面如下. 实现技术:主要是通过Graphics类的DrawImage方法来绘制数字时钟中所有的数字,这些数字是从网上找的一些图片文件.时钟使用DateTime中No ...

  7. jquery easyui datebox 的使用

    看了jquery easyui databox的官方api,还可以加入倒是很简单,但是想要获得他的值和修改值就很费劲,不知道怎么弄,试了n次终于搞定.这里总结一下,供有相同问题的人查询. 1. 官方a ...

  8. [039] 微信公众帐号开发教程第15篇-自定义菜单的view类型（访问网页）

    引言及内容概要 距离写上一篇文章<自定义菜单的创建及菜单事件响应>整整过了两个月的时间,那时公众平台还没有开放view类型的菜单.在不久前,微信公众平台悄悄开放了view类型的菜单,却没有 ...

  9. Linux下的nginx启动、重新启动

    nginx的启动命令是: /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf -c制定配置文件的路径,不加-nginx会自动 ...

  10. PV,UV,IP

    参加了DTCC归来之后,各大电商技术大牛都会自豪的分享一下自己公司网站的PV,流量等等.当时也是一知半解,回来之后赶紧查了查,也算是扫扫盲. 以下摘自网络中,自己稍稍做了整理,对于PV,流量和带宽的理 ...