react.js用于与父节点通信的自定义事件
我正在听和正常的DOM CustomEvent沟通到父节点：
在小孩：
var moveEvent = new CustomEvent('the-graph-group-move', { detail: { nodes: this.props.nodes, x: deltaX, y: deltaY }, bubbles: true }); this.getDOMNode().dispatchEvent(moveEvent);
在父母：
componentDidMount: function () { this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup); },
这有效，但有一个反应特定的方式会更好？
如上所述：
React的方式是通过道具直接将callback传递给孩子。 React中不支持自定义事件w / bubbling。
反应式编程抽象是正交的：
通过观察者模式编程交互式系统是困难且容易出错的，但在许多生产环境中仍然是执行标准。 我们提出一种方法逐渐贬低观察者赞成反应式编程抽象。 多个库层帮助程序员平稳地将现有的代码从callback移植到更具说明性的编程模型。
React哲学基于Command模式：
参考
- 弃用观察者模式
- 命令模式：命令历史
- 组件互操作与反应和自定义元素
- 在TypeScript中构buildRedux
- 秘银是如何与其他框架不同的 – 秘银
还有另外一个我觉得很合理，特别是如果从父母到孩子的钻孔已经变得麻烦了。 他称之为简单的沟通。 这是链接：
https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md
一个可能的解决scheme，如果你绝对必须诉诸在ReactJs应用程序的观察者模式，你可以劫持一个正常的事件。 例如，如果您想让delete键导致一个标记为删除的<div> ，您可以让<div>监听一个将由customEvent调用的keydown事件。 捕获body上的keydown，并在选定的<div>上派发一个customEvent keydown事件。 分享以防情况有所帮助。
您可以通过上下文传递的callback将事件向上冒泡： [CodePen]
import React, {Component, PropTypes} from 'react'; class EventContext extends Component { static contextTypes = { onMyEvent: PropTypes.func }; static childContextTypes = { onMyEvent: PropTypes.func.isRequired }; static propTypes = { onMyEvent: PropTypes.func.isRequired }; getChildContext() { let {onMyEvent} = this.props; return { onMyEvent: (...args) => { // stop propagation if handler returns false if (onMyEvent(...args) !== false) { // bubble the event this.context.onMyEvent && this.context.onMyEvent(...args); } } }; } render() { return this.props.children; } } class MyComponent extends Component { static contextTypes = { onMyEvent: PropTypes.func }; render() { let {onMyEvent} = this.context; return <button onClick={onMyEvent}>Click me</button>; } } export default <EventContext onMyEvent={e => console.log('grandparent got event: ', e)}> <EventContext onMyEvent={e => console.log('parent got event: ', e)}> <MyComponent/> </EventContext> </EventContext>;
