我的情況：我有兩個 react 組件，它們的 props 資料 90% 相同，但 HTML 不同。
我不想將變數宣告加倍到兩個檔案中。
所以我想把props銷毀的主要部分匯出成一個可匯入的物件什么的。有沒有辦法做到這一點？或者也許是一種不同的方式來做到這一點？
function ProductTotalCount (props) {
//common part it's doubled in two files
const {
className,
activeClassName,
big,
cleared,
totalCount,
max,
min,
changedManually,
deviceType,
cities,
updateData
} = props
// specific props for component
const { setSelectedCityDropdownOpen } = props
//next part of component
uj5u.com熱心網友回復：
我有兩個假設：
由于您擁有 90% 的相同道具，因此 jsx 僅對于那些常見道具而不是整個組件是相同的。如果是，那么您可以僅為公共道具創建一個公共組件，并在其他兩個組件中使用它們。
如果首先不是這種情況，那么老實說，如果您真的想使用解構來使用變數，在這種情況下，我認為您對此無能為力，但是是的，您可以將具有不同名稱的鍵與常用的有：
{ setSelectedCityDropdownOpen, ...rest } = props;
在這里，rest 將包含您所有的常用道具，然后您可以將它們用作 rest[key]。
uj5u.com熱心網友回復：
我建議您實作可重用的、無狀態的 UI 組件，例如
- 下拉串列中有
selected道具和data道具，并onSelect代替道具setSelectedCityDropdownOpen和cities - 其他可以顯示任何文本的 UI 元素（而不是硬編碼一個專門
totalCount用于例如的 elem ）
這些無狀態的 UI 組件不僅可以用于城市，還可以用于任何事情。
然后將它們包裝到一個父組件（容器）中，它引入所有用例特定的邏輯，如當前選擇的城市、最小值、最大值、totalCount 等作為狀態（它的名稱可以是例如CitySelector非常特定于用例的）。
該父級應處理所有邏輯并將存盤在其狀態中的值傳遞給可重用的 UI 組件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/394550.html