In React我如何讓我的孩子告訴父母它的鑰匙？

在React中，我們正在加載定義自己ID的子組件列表。然後，我們想要根據他們設置的內部ID來重新安排孩子。我們如何將內部ID傳遞給父母？此外，使用該ID作爲父級渲染ekey會很好。請注意，內部ID與組件名稱不匹配。In React我如何讓我的孩子告訴父母它的鑰匙？

class Thing1 extends React.Component { 
    const ID = 'Thing1IDString'; 
} 

class Thing2 extends React.Component { 
    const ID = 'Thing2IDString'; 
} 


<Parent> 
<Thing1 /> 
<Thing2 /> 
<Thing3 /> 
</Parent>

來源

2017-03-02 Kenoyer130

你是如何在孩子身上產生身份證的？ –

您可以將ID定義爲React組件中的道具，並將值從父母傳遞給孩子 –

將回調作爲道具傳遞以檢索ID。你會怎麼做通行證？你能分享這些代碼嗎？ –

我建議是試圖使父的第一件事情知道如何計算子ID莫名其妙。如果孩子ID來自數據庫，則讓父母計算它們而不是讓孩子計算它們。樹中較低的組件應該不那麼智能。把他們需要知道的所有東西交給最終形式，這樣他們就可以簡單地渲染它。

你在談論的結構，這裏的孩子有「私有」的數據父需要時採取行動，一般是解決了陣營由：

存儲在父數據
將數據作爲道具傳遞給孩子
將onDataChanged函數傳遞給孩子，以便孩子可以在數據更改時告訴父母。

這是「受控輸入」模式。起初感覺很尷尬，看起來似乎乍一看有太多的間接性。但優點是數據流是非常可預測的。

現在，如果這是不可能的，你的情況，你真的需要孩子「登記」與父，那麼你可以使用道具或背景的registerChild功能傳遞給孩子們。在孩子中，使用其生命週期方法函數及其計算的ID。然後，父母可以跟蹤這些ID，但需要。

來源

2017-03-04 02:39:24 Dave

所以我們的案例是第二個。父主機4 -5「表單」組件，但佈局由數據庫確定。用戶可以拖放它們，並且每個頁面可能會顯示10-20。基本上可以想象一個具有100個可由用戶重新佈置的屏幕的大型應用程序。所以我們不能只包含父母可供選擇的組件列表。謝謝！ – Kenoyer130

你也提到了上下文，但官方文檔似乎不鼓勵這樣做。（https://facebook.github.io/react/docs/context.html） – Kenoyer130

Props是傳遞數據和回調的首選方式 - 上下文通常用於更高級的東西，比如表單庫或其他情況父母和孩子需要緊密耦合，而不需要用戶負責設置它。 – Dave

你的語法有點混亂。讓我們將僞示例轉換爲實際工作的ReactJS代碼示例。

假設你有一個孩子（一個或多個）組件（S）：

class Thing1 extends React.Component { 
    constructor(props) { 
     super(props); 

     this.id = 'Thing1IDString'; 
    } 

    render(){ 
     return (
      <p>Child component</p> 
     ); 
    } 
}

如果您要訪問Thing1的ID屬性從父組件，有幾種方法怎麼辦communicate between components 。

這取決於你想達到什麼。如果你只是想訪問一個子組件屬性，你可以使用refs：

class Parent extends React.Component { 
    doSomething() { 
     // Access anything you need from `this.refs.thing1` 
     const thing1ID = this.refs.thing1.id; 
    } 
    render() { 
     return (
      <div> 
       <button onClick={this.doSomething.bind(this)}>Get ID</button> 
       <Thing1 ref="thing1" />  
      </p> 
     ); 
    } 
}

來源

2017-03-02 22:25:46

In React我如何讓我的孩子告訴父母它的鑰匙？

回答

相關問題