绑定事件发射器上的单个事件

Binding for a single event on an event emitter

本文关键字:事件 单个 发射器 绑定      更新时间:2023-09-26

React 组件需要事件才能接收来自其他对象的状态更改。为了使组件可重用,我想在组件外部定义触发状态更改的事件类型/名称。所以我在考虑一个绑定事件发射器和事件类型/名称的类。React 组件只需要调用 .on,没有任何事件类型/名称。将更多事件合并为一个事件也是有意义的。我没有在框架中看到这些泛型类,所以我不确定是否有另一种设计模式,我只是搜索了错误的关键字。

这是处理通用 React 组件事件的正确方法吗?

这里有一个例子,所以你有一个更好的主意:

var emitter = {};
_.extend(emitter, Backbone.Events);
var Component = React.createClass({
  getInitialState: function () {
    var self = this;
    self.props.update.on(function (text) {
      self.setState({text: text});
    });
    return {text: ''};
  },
  render: function () {
    return React.DOM.p({}, this.state.text != null ? this.state.text : '');
  }
});*
// this would require to know the event type/name in the component
//var component = React.createFactory(Component)({update: emitter});
var binding = new Event(emitter, 'label:changed');
var component = React.createFactory(Component)({update: binding});
// this would merge multiple events into a single one
/*var binding = Event.merge([
  new Event(emitter, 'label:changed'),
  new Event(emitter, 'label:deleted')]);*/
var component = React.createFactory(Component)({update: binding}); 

你熟悉 Flux 架构吗?它使用控制器视图可以侦听的应用商店中的事件发射器。这是你所描述的一个非常好的例子。

控制器视图是一个顶级组件,它侦听新事件,然后通过 props 将数据向下传递到较低级别的组件。

无论你是否实现Flux,Facebook都有一些很好的例子,可以在他们的待办事项列表示例中回答你的问题。