繁花如伊
OP使这个问题成为一个移动的目标。它又被更新了。因此，我觉得有责任更新我的答复。首先，回答您提供的示例：是的，这是可能的。您可以通过更新child的onClick成为this.props.onClick.bind(null, this):var Child = React.createClass({
render: function () {
return <a onClick={this.props.onClick.bind(null, this)}>Click me</a>;
}});然后，父类中的事件处理程序可以访问组件和事件，如下所示： onClick: function (component, event) {
// console.log(component, event);
},JSBin快照但这个问题本身就有误导性。父母已经知道孩子的props.在提供的示例中，这一点并不清楚，因为实际上没有提供任何道具。这个示例代码可能更好地支持被问到的问题：var Child = React.createClass({
render: function () {
return <a onClick={this.props.onClick}> {this.props.text} </a>;
}});var Parent = React.createClass({
getInitialState: function () {
return { text: "Click here" };
},
onClick: function (event) {
// event.component.props ?why is this not available?
},
render: function() {
return <Child onClick={this.onClick} text={this.state.text} />;
}});在这个例子中，你已经清楚地知道了什么是孩子的道具。JSBin快照如果它真的是关于使用孩子的道具…如果它真的是关于使用一个孩子的道具，你可以完全避免任何与孩子的勾搭。JSX有一个扩展属性我经常在一些组件上使用API，比如child。它需要所有的props并将它们应用到组件中。孩子的样子是这样的：var Child = React.createClass({
render: function () {
return <a {...this.props}> {this.props.text} </a>;
}});允许您直接在父级中使用这些值：var Parent = React.createClass({
getInitialState: function () {
return { text: "Click here" };
},
onClick: function (text) {
alert(text);
},
render: function() {
return <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />;
}});JSBin快照当您连接其他的子组件时，不需要额外的配置var Parent = React.createClass({
getInitialState: function () {
return {
text: "Click here",
text2: "No, Click here",
};
},
onClick: function (text) {
alert(text);
},
render: function() {
return <div>
<Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />
<Child onClick={this.onClick.bind(null, this.state.text2)} text={this.state.text2} />
</div>;
}});JSBin快照但我怀疑这不是你的实际用例。让我们进一步挖掘…一个健壮的实例提供的示例的泛型性质很难讨论。我创建了一个组件，演示了上述问题的实际用途，在雷克蒂途径：DTServiceCalculator工作示例DTServiceCalculator回购此组件是一个简单的服务计算器。您将为它提供一个服务列表(包括名称和价格)，它将计算所选价格的总和。孩子们完全无知。ServiceItem是本例中的子组件。它对外界的看法不多。它需要一些道具，其中之一是单击时要调用的函数。<div onClick={this.props.handleClick.bind(this.props.index)} />它只会打电话给提供的handleClick提供的回调index[来源].父母是孩子DTServicesCalculator父组件是此示例。也是个孩子。让我们看看。DTServiceCalculator创建子组件列表(ServiceItem为他们提供道具[来源]。它是ServiceItem但是它是组件的子组件，将列表传递给它。它不拥有数据。因此，它再次将组件的处理委托给其父组件。来源<ServiceItem chosen={chosen} index={i} key={id} price={price} name={name} onSelect={this.props.handleServiceItem} />handleServiceItem捕获索引，从子节点传递索引，并将其提供给其父对象[来源]handleServiceClick (index) {
this.props.onSelect(index);}所有人都知道“所有权”概念是反应中的一个重要概念。我建议多读一些关于它的文章。这里.在我展示的示例中，我一直将事件的处理委托到组件树上，直到我们到达拥有状态的组件为止。当我们最终到达那里时，我们会像这样处理状态选择/取消选举。来源]:handleSelect (index) {
let services = […this.state.services];
services[index].chosen = (services[index].chosen) ? false : true;
this.setState({ services: services });}结语尽量保持最外层的部件尽可能不透明。努力确保他们对父组件选择如何实现它们有很少的偏好。要知道谁拥有您正在操作的数据。在大多数情况下，您需要将处理树的事件委托给以下组件：拥有那个州。旁白：通量模式是减少应用程序中这种必要连接的好方法。