Javascript 如何在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'));

var-App=React.createClass({
myAction:函数（thingId）{
this.setState（{currentThing:thingId}）；
},
render:function（）{
返回（）；
}
});
var thingscocontainer=React.createClass({
render:function（）{
返回（）；
}
});
var ThingList=React.createClass({
render:function（）{
var self=这个；
var thingNodes=this.props.data.map（函数（thing）{
返回（）；
});
返回（{thingNodes}）；
}
});
var Thing=React.createClass({
性能：函数（）{
this.props.app.myAction（this.props.thing.id）；
},
render:function（）{
返回(
{这个。道具。东西。标题}
皮普！
);
}
});
React.render（似乎不能直接解决这种情况

在我的解决方案中，我将
应用程序
对象向下传递了几个级别。这感觉不对。在Ember中，我可以使用单例控制器。在Angular中，我可能会使用服务。在主干或jQuery中，我会使用事件

我不知道从React那里能得到多少这种神奇的线路

我上面的解决方案，包括组件之间的显式连接，甚至跨越多个边缘，是正确的方法吗？
我只传递函数，而不是整个对象：

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

var-App=React.createClass({
myAction:函数（thingId）{
this.setState（{currentThing:thingId}）；
},
render:function（）{
返回（）；
}
});
var thingscocontainer=React.createClass({
render:function（）{
返回（）；
}
});
var ThingList=React.createClass({
render:function（）{
var self=这个；
var thingNodes=this.props.data.map（函数（thing）{
返回（）；
});
返回（{thingNodes}）；
}
});
var Thing=React.createClass({
性能：函数（）{
this.props.myAction（this.props.thing.id）；
},
render:function（）{
返回(
{这个。道具。东西。标题}
皮普！
);
}
});
React.render（，document.getElementById（'content'））；

除此之外，我看不出您的方法有任何错误，一开始它确实感觉有点奇怪，但它的好处是父元素总是负责直接修改状态，并且很容易调试这样的问题，因为有一个非常清晰简洁的“流”