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 });}
結語
盡量保持最外層的部件盡可能不透明。努力確保他們對父組件選擇如何實現它們有很少的偏好。
要知道誰擁有您正在操作的數據。在大多數情況下，您需要將處理樹的事件委托給以下組件：擁有那個州。
旁白：通量模式是減少應用程序中這種必要連接的好方法。
