OP使這個(gè)問(wèn)題成為一個(gè)移動(dòng)的目標(biāo)。它又被更新了。因此，我覺(jué)得有責(zé)任更新我的答復(fù)。
首先，回答您提供的示例：
是的，這是可能的。
您可以通過(guò)更新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>;
}});然后，父類中的事件處理程序可以訪問(wèn)組件和事件，如下所示：
onClick: function (component, event) {
// console.log(component, event);
},JSBin快照
但這個(gè)問(wèn)題本身就有誤導(dǎo)性。
父母已經(jīng)知道孩子的props.
在提供的示例中，這一點(diǎn)并不清楚，因?yàn)閷?shí)際上沒(méi)有提供任何道具。這個(gè)示例代碼可能更好地支持被問(wèn)到的問(wèn)題：
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} />;
}});在這個(gè)例子中，你已經(jīng)清楚地知道了什么是孩子的道具。
JSBin快照
如果它真的是關(guān)于使用孩子的道具…
如果它真的是關(guān)于使用一個(gè)孩子的道具，你可以完全避免任何與孩子的勾搭。
JSX有一個(gè)擴(kuò)展屬性我經(jīng)常在一些組件上使用API，比如child。它需要所有的props并將它們應(yīng)用到組件中。孩子的樣子是這樣的：
var Child = React.createClass({
render: function () {
return <a {...this.props}> {this.props.text} </a>;
}});允許您直接在父級(jí)中使用這些值：
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快照
當(dāng)您連接其他的子組件時(shí)，不需要額外的配置
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快照
但我懷疑這不是你的實(shí)際用例。讓我們進(jìn)一步挖掘…
一個(gè)健壯的實(shí)例
提供的示例的泛型性質(zhì)很難討論。我創(chuàng)建了一個(gè)組件，演示了上述問(wèn)題的實(shí)際用途，在雷克蒂途徑：
DTServiceCalculator工作示例
DTServiceCalculator回購(gòu)
此組件是一個(gè)簡(jiǎn)單的服務(wù)計(jì)算器。您將為它提供一個(gè)服務(wù)列表(包括名稱和價(jià)格)，它將計(jì)算所選價(jià)格的總和。
孩子們完全無(wú)知。
ServiceItem是本例中的子組件。它對(duì)外界的看法不多。它需要一些道具，其中之一是單擊時(shí)要調(diào)用的函數(shù)。
<div onClick={this.props.handleClick.bind(this.props.index)} />
它只會(huì)打電話給提供的handleClick提供的回調(diào)index[來(lái)源].
父母是孩子
DTServicesCalculator父組件是此示例。也是個(gè)孩子。讓我們看看。
DTServiceCalculator創(chuàng)建子組件列表(ServiceItem為他們提供道具[來(lái)源]。它是ServiceItem但是它是組件的子組件，將列表傳遞給它。它不擁有數(shù)據(jù)。因此，它再次將組件的處理委托給其父組件。來(lái)源
<ServiceItem chosen={chosen} index={i} key={id} price={price} name={name} onSelect={this.props.handleServiceItem} />
handleServiceItem捕獲索引，從子節(jié)點(diǎn)傳遞索引，并將其提供給其父對(duì)象[來(lái)源]
handleServiceClick (index) {
this.props.onSelect(index);}所有人都知道
“所有權(quán)”概念是反應(yīng)中的一個(gè)重要概念。我建議多讀一些關(guān)于它的文章。這里.
在我展示的示例中，我一直將事件的處理委托到組件樹上，直到我們到達(dá)擁有狀態(tài)的組件為止。
當(dāng)我們最終到達(dá)那里時(shí)，我們會(huì)像這樣處理狀態(tài)選擇/取消選舉。來(lái)源]:
handleSelect (index) {
let services = […this.state.services];
services[index].chosen = (services[index].chosen) ? false : true;
this.setState({ services: services });}
結(jié)語(yǔ)
盡量保持最外層的部件盡可能不透明。努力確保他們對(duì)父組件選擇如何實(shí)現(xiàn)它們有很少的偏好。
要知道誰(shuí)擁有您正在操作的數(shù)據(jù)。在大多數(shù)情況下，您需要將處理樹的事件委托給以下組件：擁有那個(gè)州。
旁白：通量模式是減少應(yīng)用程序中這種必要連接的好方法。
