Question

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});

Answer 1

您熟悉Flux architecture吗？它使用Stores中Controller-view可以收听的事件发射器。这是您所描述的一个非常好的例子。

Controller-view是一个顶级组件，用于侦听新事件，然后通过props将数据传递给较低级别的组件。

无论您是否实施Flux，Facebook都有一些很好的例子可以在Todo List Example中回答您的问题。

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

1 个答案: