Question

我对React只有几个小时的新手，所以我可能错过了一些明显的东西。我有一个看起来有点像这样的应用程序：

  var App = React.createClass({
    myAction: function(thingId) {
      this.setState({currentThing: thingId});
    },

    render: function() {
      return (<ThingsContainer app={this}/>);
    }
  });

  var ThingsContainer = React.createClass({
    render: function() {
      return (<ThingList app={this.props.app}/>);
    }
  });

  var ThingList = React.createClass({
    render: function() {
      var self = this;
      var thingNodes = this.props.data.map(function (thing) {
        return (<Thing thing={thing} app={self.props.app} key={thing.id}></Thing>);
      });
      return (<div>{thingNodes}</div>);
    }
  });

  var Thing = React.createClass({
    performAction: function() {
      this.props.app.myAction(this.props.thing.id);
    },

    render: function() {
      return (
        <div>
          <h2>{this.props.thing.title}</h2>
          <button onClick={this.performAction}>pip!</button>
        </div>
      );
    }
  });

  React.render(<App />, document.getElementById('content'));

我想从较低级别的对象触发顶级对象上的事件。 relevant page似乎没有直接解决这种情况。

在我的解决方案中，我将app对象传递到几个级别。这感觉不对。在恩伯我可以使用单独的控制器。在Angular，我可能会使用一项服务。在Backbone或jQuery中我会使用一个事件。

我不知道React会有多少这种神奇的布线。

我的上述解决方案是否涉及组件之间的明确连接，甚至跨越多个边缘，正确的方法？

Answer 1

我只是传递函数而不是整个对象：

var App = React.createClass({
    myAction: function(thingId) {
      this.setState({currentThing: thingId});
    },

    render: function() {
      return (<ThingsContainer myAction={this.myAction}/>);
    }
  });

  var ThingsContainer = React.createClass({
    render: function() {
      return (<ThingList myAction={this.props.myAction}/>);
    }
  });

  var ThingList = React.createClass({
    render: function() {
      var self = this;
      var thingNodes = this.props.data.map(function (thing) {
        return (<Thing thing={thing} myAction={this.props.myAction} key={thing.id}></Thing>);
      });
      return (<div>{thingNodes}</div>);
    }
  });

  var Thing = React.createClass({
    performAction: function() {
      this.props.myAction(this.props.thing.id);
    },

    render: function() {
      return (
        <div>
          <h2>{this.props.thing.title}</h2>
          <button onClick={this.performAction}>pip!</button>
        </div>
      );
    }
  });

  React.render(<App />, document.getElementById('content'));

除此之外，我没有看到你的方法有什么问题，起初确实感觉有点奇怪，但关于它的好处是，父元素总是负责直接修改状态，它是＆＃39很容易调试这样的问题，因为有一个非常清晰和简洁的流程＆＃39;

如何在React中的更高元素上触发事件？

1 个答案: