TA貢獻1875條經驗 獲得超3個贊
讓我們看看每個選項的優缺點，給定組件：User
const User = ({name,lastName}) => <>...</>
破壞道具：
const props = {
name: 'Jhon',
lastName: 'Cena'
};
<User {...props}/>
短
鍵必須與屬性匹配
容易出錯，當組件未使用某些鍵時，可能會出現意外行為
無自動完成和自動建議
const props = {
name: 'Jhon',
lastName: 'Cena',
id: 325013213
};
// User component might be updated in future releases and might use id unexpectedly.
<User {...props}/>
傳遞命名道具
const props = {
user: 'Jhon',
lastName: 'Cena'
};
<User name={user} lastName={lastName}/>
自動完成和自動建議
值不必與 prop 名稱匹配（如name={user})
維護
長語法
在許多道具上不可讀
可重復 （className={className})
const props = {
name: 'Jhon',
lastName: 'Cena'
};
<User {...{ name,lastName }}/>
自動完成和自動建議
維護
讀
外觀和感覺都很糟糕
在我的代碼庫中，我試圖組合：
const props = {
className: 'user',
user: 'Jhon',
lastName: 'Cena'
};
<User {...{className,lastName} name={user}/>
// Although you totally can write like this,
// I find it confusing
<User {...{className, name:user,lastName}/>
TA貢獻1770條經驗 獲得超3個贊
我想這取決于你在 React 組件中需要什么。我通常更喜歡保持我的組件盡可能干凈（純凈），并且只通過任何需要的東西作為道具。
我建議閱讀如何在 reacts.org 網站上指導反應和反應組件/道具中的思維。請記住，在JS原子值（字符串，數字，布爾值等）中，對象（數組也是對象）通過引用傳遞（請參閱此處和此處），傳遞對象意味著您始終冒著在子組件中改變對象的風險，這直接與以下嚴格規則相矛盾：“所有 React 組件必須像純函數一樣操作其 props。
編輯：也就是說，這仍然取決于您的要求。如果您堅持不改變傳遞的對象，那應該沒問題。
這應該為您提供有關如何設計組件的相當好的指南。
TA貢獻1831條經驗 獲得超10個贊
我會說作為對象會更好。就像我一樣，如果您需要通過API發送，您可以輕松地將其轉換為json。傳入對象也會將其設置為標準命名約定。當作為單獨的道具傳遞時，您可以靈活地重命名它們，但這可能會導致人為錯誤。如果將其作為對象傳遞，則從一開始就定義命名，并且不會更改它。因此，當在多個組件中引用對象時，您不必在道具中傳遞它時引用您定義的內容
舉報