正確的React-ful方式來處理父組件中只能作用於所選子組件的函數？

Question

所以為了簡化它，我有兩個React組件，一個是另一個的子組件。 讓我們說它們是ItemTable和ItemRow。 ItemTable有許多ItemRows。 調用ItemTable並接收一組項目。 對於此數組中的每個項目，將在ItemTable中創建ItemRow。 我希望能夠選擇某些ItemRows，每個ItemRows綁定到一個項目，並對ItemTable級別的每個選定項目執行一個特定操作。 我在每一行上都有一個復選框供選擇，在ItemTable中有一個按鈕，可以開始對每個選定的項目執行操作。 有兩種方法我可以想到這樣做，我不確定哪種方式是在React中做到這一點的“正確”方式。

選項1：在ItemTable狀態下初始化一個空數組。 每次檢查ItemRow中的復選框時，它都會調用從父ItemTable狀態向下傳遞的句柄函數，該函數可以從ItemTables數組中添加或刪除它。 換句話說，要處理的項目列表將在ItemTable級別跟蹤，然后單擊處理操作的按鈕時，它會解析數組並對每個項目執行操作。

選項2：在創建時將License變量初始化為false。 選中后，它會將LicenseRow的狀態更改為true。 如果未選中，則為false。 當檢查LicenseTable級別的按鈕時，它將轉到每個子級，如果它被標記為true（已選中），則處理該項目。

我將重新開始，我認為這是更好的方法。 我知道React是一個自上而下的數據流，所以我傾向於選項2，但我覺得管理孩子的列表應該是父母的工作。 我不確定這兩種方式是否一定“錯誤”，但在您看來，處理這些項目的更好方法是什么？

Answer 1

這兩種策略都是有效的，這里沒有正確或錯誤的答案。 根據我的經驗， 選項1是更常見的方法。

與選項2相比 ，它還有一些其他好處：

• 通常我發現設置和調試更容易（我相信你需要使用ref來訪問孩子的任何東西）。
• 在較大的集合上，它會表現得更好，因為它已經知道在處理之前選擇了哪些項目。 即使實際只選擇了一個項目， 選項2也必須枚舉整個集合。
• 讓父母擁有狀態使您可以更輕松地完成更多工作。 例如，如果未選擇任何項目進行處理，則可以禁用該按鈕。

我知道React是一個自上而下的數據流，因此我傾向於選項2

在我看來，數據仍然只在選項1中流下來。 家長應該何時回調觸發哪些數據更改並將其傳遞到孩子們的決定。

最后選擇是你的，祝你好運。 :)