如何改變葉子節點的道具在反應的元素樹

說我有一個元素樹是這樣的：如何改變葉子節點的道具在反應的元素樹

<Form> 
    <FormItem> 
    <Input></Input> 
    </FormItem> 
    <Input></Input> 
    <MyInput></MyInput> 
</Form>

我想禁用所有的Input和MyInput組件。

而不是將{disabled: true}添加到所有這些輸入組件，我想自動遍歷並添加禁用的prop。所以當我刪除或添加Input組件我不應該關注disabled道具。

來源

2017-06-16 Jack Hu

所有你需要在父組件定義的狀態，對應於你的輸入組件的disabled屬性首先，讓我們叫它this.state.isInputDisabled。因此，有，你可以把它作爲一個prop：

<Form> 
    <FormItem> 
    <Input isDisabled={this.state.isInputDisabled}></Input> 
    </FormItem> 
    <Input isDisabled={this.state.isInputDisabled}></Input> 
    <MyInput isDisabled={this.state.isInputDisabled}></MyInput> 
</Form>

然後當你在父組件改變狀態，你同樣需要更新的孩子。要對覆蓋componentWillReceiveProps方法，例如：

class MyInput extends React.Component { 

    componentWillReceiveProps(nextProps) { 
    this.forceUpdate(); 
    } 

    render() { 
    return <input type="text" disabled={this.props.isDisabled} /> 
    } 
}

爲了回答您的評論：

什麼一段代碼，你真的希望爲您處理disabled屬性？還有另外兩種方式來管理從父兒童的國家我能想到的：在refs

Store中引用輸入組件，並在父管理它們（但這又涉及額外的prop要避免）。
授予特定HTML類渲染成分，只是用香草JS來更新disabled道具：
```
function toggleInputDisabled(disable) { 
    document 
    .getElementsByClassName('your-input-class') 
    .forEach(elem => elem.disabled = disable); 
} 
```
使用香草JS不作出反應禁止的，但它被認爲是不好的做法，你應該只有當你看到沒有簡單的出路時纔去做。

來源

2017-06-16 08:05:10 Nhor

thx for reply。我的問題是自動添加'disabled'道具。所以當我刪除或添加'輸入'組件時，我不應該關注被禁用的道具。對不起，我沒有說清楚。 –

我用一些你可能會覺得有用的信息更新了我的答案，希望它能消除你的疑惑。 – Nhor

'香草JS'似乎對我很好。因爲我只想將所有表單項設置爲只讀。當用戶點擊'edit'按鈕時，我應該刪除'disable'屬性。 –

傳道具下來就是做出反應的方式，但是如果你絕對堅持，你不想這樣做，有映入腦海幾個選項：

使用某種狀態容器例如Redux

您可以通過Actions和Reducers集中管理Redux狀態下的isInputDisabled標誌。然後，通過react-redux將您的Input和MyInput組件中的每一個連接到您的Redux狀態。當Redux狀態改變時，通過react-redux連接到它的所有組件都會收到通知並進行相應的呈現。

從丹·阿布拉莫夫（終極版的聯合創始人）這兩個視頻教程是一個偉大的介紹和高級指南：

使用陣營Context

這被認爲是更先進的fe ature並且在React團隊中是可以避免的。它確實變得有點「魔力」，我個人不喜歡它，因爲你不再擁有組件支撐什麼道具的透明度。來自上下文文檔：

絕大多數應用程序不需要使用上下文。

如果您希望您的應用程序穩定，請勿使用上下文。這是一個實驗性API，它很可能會在未來版本的 React中被破解。

如果您不熟悉像Redux或 MobX這樣的狀態管理庫，請勿使用上下文。對於許多實際應用，這些庫和它們的React綁定對於管理與許多組件相關的狀態來說是一個很好的選擇。對於您的問題，Redux更有可能是正確的解決方案，而不是正確的解決方案。

如果您不是經驗豐富的React開發人員，請不要使用上下文。有通常是一個更好的方式來實現功能只是使用道具和狀態。

如果你堅持使用方面，儘管有這些警告，嘗試您的上下文中使用，以隔離到一個小區域，並避免使用上下文API 直接在可能的情況，這樣更容易對API 變化時升級。

來源

2017-06-16 11:13:58 Michael

如何改變葉子節點的道具在反應的元素樹

回答

相關問題