react

react

React 如何跨组件进行通信?组件和组件之间如何通信?

前端开发atool 发表了文章 • 0 个评论 • 1365 次浏览 • 2016-07-15 17:04 • 来自相关话题

react最近在项目中用的很爽,不用操作js dom会方便很多;另外组件的封装,state绑定界面,爽的不要不要的。
 
但是项目中经常会遇到跨组件的通信。这个可以分成两类:
一类是父组件和子组件之见的通信;
一类是完全两个不相干的组件之前的通信,通常这两个组件是由路由(router)分割开了。
 
分别介绍一下,对于第一类:父子组件的通信,其实很容易通过子组件传递一个function类型的属性来解决,示例如下:
const Parent = React.createClass({
test_func: function(data) {
},
render: function(){
<Child funcProp={this.test_func} />
}
});

const Child = React.createClass({
propTypes: {
funcProp: React.PropTypes.func
},
componentDidUpdate: function() {
this.props.funcProp('send data to parent');
},
render: function(){
<div>child component.</div>
}
});通过子组件的 funcProp 属性方法就可以进行消息发送和通信。这种方式对于两个组件直接父子关系还比较好用,但是对于跨级的父子组件(实际上已经可以叫做爷子组件),或者评级的兄弟组件,他们之间的通信就比较麻烦了,需要传递好几层的数据。
 
这种情况我们都可以和第二类算作一起,作为跨组件的通信。我在项目中同样也遇到了,所以封装了一个简单的实现,大小才0.7kb左右,非常精简。代码为:https://github.com/hustcc/onfire.js
 
安装 npm install onfire.js
使用实例:
import onfire from 'onfire.js';

// 绑定事件
var eventObj = onfire.on('test_event', function(data) {
console.log('this is a event 1');
});
var eventObj2 = onfire.on('test_event', function(data) {
console.log('this is a event 2');
});

// 触发事件
onfire.fire('test_event', 'test_data');

// 取消绑定
onfire.un(eventObj); // 取消绑定这个事件.
onfire.un('test_event'); // 取消绑定所有的 `test_event`.

// 长度
onfire.size();当然这个库也可以直接使用script标签引入使用。
 
  查看全部
react最近在项目中用的很爽,不用操作js dom会方便很多;另外组件的封装,state绑定界面,爽的不要不要的。
 
但是项目中经常会遇到跨组件的通信。这个可以分成两类:
一类是父组件和子组件之见的通信;
一类是完全两个不相干的组件之前的通信,通常这两个组件是由路由(router)分割开了。
 
分别介绍一下,对于第一类:父子组件的通信,其实很容易通过子组件传递一个function类型的属性来解决,示例如下:
const Parent = React.createClass({
test_func: function(data) {
},
render: function(){
<Child funcProp={this.test_func} />
}
});

const Child = React.createClass({
propTypes: {
funcProp: React.PropTypes.func
},
componentDidUpdate: function() {
this.props.funcProp('send data to parent');
},
render: function(){
<div>child component.</div>
}
});
通过子组件的 funcProp 属性方法就可以进行消息发送和通信。这种方式对于两个组件直接父子关系还比较好用,但是对于跨级的父子组件(实际上已经可以叫做爷子组件),或者评级的兄弟组件,他们之间的通信就比较麻烦了,需要传递好几层的数据。
 
这种情况我们都可以和第二类算作一起,作为跨组件的通信。我在项目中同样也遇到了,所以封装了一个简单的实现,大小才0.7kb左右,非常精简。代码为:https://github.com/hustcc/onfire.js
 
安装 npm install onfire.js
使用实例:
import onfire from 'onfire.js';

// 绑定事件
var eventObj = onfire.on('test_event', function(data) {
console.log('this is a event 1');
});
var eventObj2 = onfire.on('test_event', function(data) {
console.log('this is a event 2');
});

// 触发事件
onfire.fire('test_event', 'test_data');

// 取消绑定
onfire.un(eventObj); // 取消绑定这个事件.
onfire.un('test_event'); // 取消绑定所有的 `test_event`.

// 长度
onfire.size();
当然这个库也可以直接使用script标签引入使用。
 
 

百度Echart 3.0的react封装

前端开发atool 发表了文章 • 0 个评论 • 1753 次浏览 • 2016-06-12 18:59 • 来自相关话题

github项目地址:https://github.com/hustcc/echarts-for-react
DEMO地址:http://git.hust.cc/echarts-for-react/#/?_k=l9a9ca
 
使用非常简单
一、安装npm install echarts-for-react
二、引入使用import React from 'react';
import ReactEcharts from 'echarts-for-react';

<ReactEcharts
option={this.getOtion()}
style={{height: '300px'}}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />目前ReactEcharts有以下属性:
option、style、theme、className、onChartReady、showLoading、onEvents。大家可以去github上看readme文件。
 
另外API方法,只有一个getEchartsInstance()方法获取echarts的实例对象,然后就可以调用echarts的所有API方法了。





  查看全部
github项目地址:https://github.com/hustcc/echarts-for-react
DEMO地址:http://git.hust.cc/echarts-for-react/#/?_k=l9a9ca
 
使用非常简单
一、安装
npm install echarts-for-react

二、引入使用
import React from 'react';
import ReactEcharts from 'echarts-for-react';

<ReactEcharts
option={this.getOtion()}
style={{height: '300px'}}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />
目前ReactEcharts有以下属性:
option、style、theme、className、onChartReady、showLoading、onEvents。大家可以去github上看readme文件。
 
另外API方法,只有一个getEchartsInstance()方法获取echarts的实例对象,然后就可以调用echarts的所有API方法了。

下载_(1).png

 

React 如何跨组件进行通信?组件和组件之间如何通信?

前端开发atool 发表了文章 • 0 个评论 • 1365 次浏览 • 2016-07-15 17:04 • 来自相关话题

react最近在项目中用的很爽,不用操作js dom会方便很多;另外组件的封装,state绑定界面,爽的不要不要的。
 
但是项目中经常会遇到跨组件的通信。这个可以分成两类:
一类是父组件和子组件之见的通信;
一类是完全两个不相干的组件之前的通信,通常这两个组件是由路由(router)分割开了。
 
分别介绍一下,对于第一类:父子组件的通信,其实很容易通过子组件传递一个function类型的属性来解决,示例如下:
const Parent = React.createClass({
test_func: function(data) {
},
render: function(){
<Child funcProp={this.test_func} />
}
});

const Child = React.createClass({
propTypes: {
funcProp: React.PropTypes.func
},
componentDidUpdate: function() {
this.props.funcProp('send data to parent');
},
render: function(){
<div>child component.</div>
}
});通过子组件的 funcProp 属性方法就可以进行消息发送和通信。这种方式对于两个组件直接父子关系还比较好用,但是对于跨级的父子组件(实际上已经可以叫做爷子组件),或者评级的兄弟组件,他们之间的通信就比较麻烦了,需要传递好几层的数据。
 
这种情况我们都可以和第二类算作一起,作为跨组件的通信。我在项目中同样也遇到了,所以封装了一个简单的实现,大小才0.7kb左右,非常精简。代码为:https://github.com/hustcc/onfire.js
 
安装 npm install onfire.js
使用实例:
import onfire from 'onfire.js';

// 绑定事件
var eventObj = onfire.on('test_event', function(data) {
console.log('this is a event 1');
});
var eventObj2 = onfire.on('test_event', function(data) {
console.log('this is a event 2');
});

// 触发事件
onfire.fire('test_event', 'test_data');

// 取消绑定
onfire.un(eventObj); // 取消绑定这个事件.
onfire.un('test_event'); // 取消绑定所有的 `test_event`.

// 长度
onfire.size();当然这个库也可以直接使用script标签引入使用。
 
  查看全部
react最近在项目中用的很爽,不用操作js dom会方便很多;另外组件的封装,state绑定界面,爽的不要不要的。
 
但是项目中经常会遇到跨组件的通信。这个可以分成两类:
一类是父组件和子组件之见的通信;
一类是完全两个不相干的组件之前的通信,通常这两个组件是由路由(router)分割开了。
 
分别介绍一下,对于第一类:父子组件的通信,其实很容易通过子组件传递一个function类型的属性来解决,示例如下:
const Parent = React.createClass({
test_func: function(data) {
},
render: function(){
<Child funcProp={this.test_func} />
}
});

const Child = React.createClass({
propTypes: {
funcProp: React.PropTypes.func
},
componentDidUpdate: function() {
this.props.funcProp('send data to parent');
},
render: function(){
<div>child component.</div>
}
});
通过子组件的 funcProp 属性方法就可以进行消息发送和通信。这种方式对于两个组件直接父子关系还比较好用,但是对于跨级的父子组件(实际上已经可以叫做爷子组件),或者评级的兄弟组件,他们之间的通信就比较麻烦了,需要传递好几层的数据。
 
这种情况我们都可以和第二类算作一起,作为跨组件的通信。我在项目中同样也遇到了,所以封装了一个简单的实现,大小才0.7kb左右,非常精简。代码为:https://github.com/hustcc/onfire.js
 
安装 npm install onfire.js
使用实例:
import onfire from 'onfire.js';

// 绑定事件
var eventObj = onfire.on('test_event', function(data) {
console.log('this is a event 1');
});
var eventObj2 = onfire.on('test_event', function(data) {
console.log('this is a event 2');
});

// 触发事件
onfire.fire('test_event', 'test_data');

// 取消绑定
onfire.un(eventObj); // 取消绑定这个事件.
onfire.un('test_event'); // 取消绑定所有的 `test_event`.

// 长度
onfire.size();
当然这个库也可以直接使用script标签引入使用。
 
 

百度Echart 3.0的react封装

前端开发atool 发表了文章 • 0 个评论 • 1753 次浏览 • 2016-06-12 18:59 • 来自相关话题

github项目地址:https://github.com/hustcc/echarts-for-react
DEMO地址:http://git.hust.cc/echarts-for-react/#/?_k=l9a9ca
 
使用非常简单
一、安装npm install echarts-for-react
二、引入使用import React from 'react';
import ReactEcharts from 'echarts-for-react';

<ReactEcharts
option={this.getOtion()}
style={{height: '300px'}}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />目前ReactEcharts有以下属性:
option、style、theme、className、onChartReady、showLoading、onEvents。大家可以去github上看readme文件。
 
另外API方法,只有一个getEchartsInstance()方法获取echarts的实例对象,然后就可以调用echarts的所有API方法了。





  查看全部
github项目地址:https://github.com/hustcc/echarts-for-react
DEMO地址:http://git.hust.cc/echarts-for-react/#/?_k=l9a9ca
 
使用非常简单
一、安装
npm install echarts-for-react

二、引入使用
import React from 'react';
import ReactEcharts from 'echarts-for-react';

<ReactEcharts
option={this.getOtion()}
style={{height: '300px'}}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict} />
目前ReactEcharts有以下属性:
option、style、theme、className、onChartReady、showLoading、onEvents。大家可以去github上看readme文件。
 
另外API方法,只有一个getEchartsInstance()方法获取echarts的实例对象,然后就可以调用echarts的所有API方法了。

下载_(1).png