呈現多個相同的React組件，它可以呈現多個其他組件？

我在React.js中創建了一個預算應用程序，其中我的父組件具有總體平衡，並且可以創建任意數量的特定「預算」組件（例如休假），從中可以創建任意數量的「進入「組件（比如，我會在舊金山花費x美元）。我最初的想法是，父母可以在其狀態中有一組「預算」組件，可以保持增長和變化，而預算組件可以在其狀態中有一組「數據」組件，並且可以保持增長。但是，我意識到這是不好的做法，因爲只有一個組件應該有狀態。呈現多個相同的React組件，它可以呈現多個其他組件？

在父組件中管理我的預算及其條目的最佳方式是什麼？因爲任何人都應該能夠返回並更改之前創建的預算中的條目數量？

感謝您的幫助，如果這讓您感到困惑，我很抱歉！

來源

2017-07-06 Gauri Ramesh

「只有一個組件應該有狀態」根本不是真的。任何組件都具有狀態是完全正常的。即使表示組件也可以擁有自己的狀態。你提出的所有IMO都不是不好的做法。 –

是的，我認爲你在「只有一個組件應該有狀態」的想法是正確的軌道。關於你的問題的評論是正確的，狀態可以放在React的組件樹中的任何地方 - 這通常是你對與UI有關的狀態（例如是否選擇該按鈕）做的事情。但是當涉及到應用程序狀態，即應用程序正在呈現的數據時，將所有數據放在一個地方通常很方便。

剛開始考慮純數據結構時，不用擔心React。

它可能要結束了看起來像預算對象的數組，而內部的每個那些預算的對象有項的數組：

[ 
    { 
    title: 'Vacations', 
    entries: [ 
     { 
     spent: 10, 
     place: 'San Francisco', 
     ... 
     }, 
     ... 
    ], 
    }, 
    ... 
]

然後當談到反應，你會希望把該狀態在主要的<App />組件中。 <App />的責任將是呈現<Budget />組件的列表。這些預算組成部分中的每一個都會將它的數據和條目作爲道具傳遞給它。因此，像，

class App extends Component { 
    constructor() { 
    this.state = { 
     budgets: [... as above ...] 
    } 
    } 

    render() { 
    const { budgets } = this.state 
    return (
     <div> 
     {this.state.budgets.map(budget => { 
      <Budget key={budget.title} {...budget} /> 
     })} 
     </div> 
    ) 
    } 
}

裏面<Budget />可以渲染<Entry />組件數組以類似的方式，因爲每個<Budget />將收到entries數組作爲道具。

在不斷變化的數據，只要你從<App />到子組件傳遞下去處理器，以及那些處理器調用setState()內<App />進行修改，預算數據，那麼你的應用程序將響應這些變化和重新渲染方面從上到下。

來源

2017-07-06 14:59:43 WildService

感謝您的迴應，這很有道理。我該如何做到這一點，所以這些預算只會出現在點擊某個按鈕上？ –

您可以在''中添加一個標誌，例如'showBudgets：false'，然後像'{showBudgets &&

...

}'一樣有條件地呈現預算列表。然後添加一個帶'onClick'的按鈕，它執行'setState（{showBudgets：true}）''。 – WildService

呈現多個相同的React組件，它可以呈現多個其他組件？

回答

相關問題