React 組件間的通信示例

// 父組件
import React from 'react';
import Son from './components/son';
class Father extends React.Component {
 constructor(props) {
 // 這里要加super，否則會(huì)報(bào)錯(cuò)
 super(props);
 this.state = {
 checked: true
 }
 }

 render() {
 return (
 <Son text="Toggle me" checked={this.state.checked} />
 )
 }
}

// 子組件
class Son extends React.Component {
 render() {
 // 接收來自父組件的參數(shù)
 let checked = this.props.checked,
 text = this.props.text;
 return (
 <label>{text}: <input type="checkbox" checked={checked} /></label>
 )
 }
}

// 父組件
import Son from './components/son';
class Father extends React.Component {
 constructor(props) {
 super(props)
 this.state = {
 checked: false
 }
 }
 onChildChanged() {
 this.setState({
 checked: newState
 })
 }

 render() {
 let isChecked = this.state.checked ? 'yes' : 'no';
 return (
 <div>
 <span>Are you checked: {isChecked }</span>
 <Son text="Toggle me" 
 initialChecked={this.state.checked}
 callbackParent={this.onChildChanged.bind(this)}
 ></Son>
 </div>
 )
 }
}

// 子組件
class Son extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 checked: this.props.initialChecked
 }
 }
 onTextChange() {
 let newState = !this.state.check.checked；
 this.setState({
 checked: newState
 });
 // 注意，setState 是一個(gè)異步方法，state值不會(huì)立即改變，回調(diào)時(shí)要傳緩存的當(dāng)前值， 
 // 也可以利用傳遞一個(gè)函數(shù)(以上傳的是對(duì)象)，并傳遞prevState參數(shù)來實(shí)現(xiàn)數(shù)據(jù)的同步更新
 this.props.callbackParent(newState);
 }
 render() {
 let text= this.props.text;
 let checked = this.state.checked;
 return (
 <label>{text}: <input type="checkbox" checked={checked} onChange={this.onTextChange.bind(this)}></label>
 )
 }
}

import React from 'react';
import Son from './components/son';
class Father extends React.Componnet {
 constructor(props) {
 super(props);
 this.state = {
 totalChecked: 0
 }
 }
 onChildChangeed() {
 let newTotal = this.state.totalChecked + (new State ? 1 ： -1 )；
 this.setState({
 totalChecked = this.state.totalChecked;
 });
 }
 render() {
 return (
 <div>
 <div>Checked numbers: {this.state.totalChecked}</div>
 <Son text="Toggle me" initialChecked={this.state.checked} callbackParent={this.onChildChanged} />
 <Son text="Toggle me too" initialChecked={this.state.checked} callbackParent={this.onChildChanged} />
 <Son text="Add me" initialChecked={this.state.checked} callbackParent={this.onChildChanged} />
 </div>
 )
 }
}

// 子組件
class Son extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 checked: this.props.initialChecked
 }
 } 

 onTextChange() {
 let newState = !this.state.checked;
 this.setState({
 checked: newState
 })
 // setState異步方法問題，注意傳值
 this.props.callbackParent(newState);
 }

 render() {
 let text = this.props.checked;
 let checked = this.state.checked;
 return {
 <label>{text}: <input type="checkbox" checked={checked} onChange={this.onTextChange.bind(this)} /></label>
 }
 }
}

// to subscribe
otherObiect.addEventListener('clickEvent', function() {
 alert('click!');
})
// to dispatch
this.dispatchEvent('clickEvent');

// to subscribe
globalBroadcaster.subcribe('clickEvent', function() {
 alert('cilck!'); 
})
// to publish
globalBroadcaster.publish('clickEvent');

import Pubsub from 'pubsub-js';
...
// to subscribe
Pubsub.subscribe('EVENT', (msg, param) => {
 console.log(msg, param);
})；
// to publish
Pubsub.publish('EVENT', param);

// to subscribe
otherObject.clicked.add(function() {
 alert('click');
})
// to dispatch
this.clicked.dispatch();

import csp from 'js-csp';

function* list() {
 for(var i = 0; i< arguments.length; i++) {
 yield arguments[i];
 }
 return "done";
}
var o = list(1, 2, 3);
var cur = o.next;
while (!cur.done) {
 cur = o.next();
 console.log(cur);
}