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. [状压dp]HDU5045 Contest

    题意: n和人做m道题, 每俩人做的题数不能相差一题以上.(也就是每n道题分别由n个人完成)   给n个人分别做m道题的概率, 求完成m题的最大期望 $1\le N \le 10$ 注意!!! fil ...

  2. ASP.NET UpdatePanel实现点击按钮无刷新且执行js脚本

    [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3770779.html]  *.aspx: <asp:ScriptManager ID=& ...

  3. Google的代码风格规范，各种语言都很全

    https://code.google.com/p/google-styleguide/

  4. java数组或集合返回空的问题

    在有返回值的情况下,平时我写代码基本遇到错误什么都是返回null,我因为我觉得把数组或集合这个初始化占空间. 但是我发现这样在每次客户段调用都要进行非空判断,而且有时调用内置api还容易报错误,于是解 ...

  5. 【HDOJ】1026 Ignatius and the Princess I

    这道题搞了很久啊.搜索非常好的一道题.昨天想了2小时,以为是深搜,但后来发现深搜怎么也没法输出正确路径.今天拿宽搜试了一下,问题就是普通的队列宽搜没法得到当前时间最小值.看了一下讨论区,发现优先级队列 ...

  6. Oracle Developer Form中Block的重新查询

    Form中某些按钮可能调用了Package对表中某些字段进行更新,但是数据库中字段的修改不会马上反映到form的界面上,所以要进行重新查询,但是用户可能使用了查询窗口进行查询之后然后再点击按钮动作,如 ...

  7. 用U盘安装系统2

    这种方式USB启动盘制作成功之后是可以往里面存放任何资料的,我喜欢用这一种 首先,在网站上下载一个你想要装的系统 (百度一下优优系统,大地系统,深度技术,MSDN我告诉你,都可以,看你自己喜欢了) 例 ...

  8. 【C++】计算所有小于N的勾股数组合，可以写入txt文件保存，每组占一行。

    #ifndef PYTHAGOREAN_H_ #define PYTHAGOREAN_H_ #include <iostream> class Pythagorean { public: ...

  9. Microsoft Azure File 服务简介

    我们非常高兴地宣布在微软Azure中国区推出 Microsoft Azure File 服务预览版.Azure File 服务使用标准 SMB 2.1 协议提供文件共享.Azure 中运行的应用程序现 ...

  10. javascript中的undefined,null,"",0和false的云集

    在各种各样的数据类型中,我们都会为其定义一个"空值"或"假值",比如对象类型的空值null,.NET Framework中数据库字段的空值DBNull,bool ...