在 ReactJS 傳遞道具

Question

以下是我在 React 組件中的 JSX 代碼，它運行良好並且目前正在使用中，但在大多數 React 博客文章中，它們也在解構 object。我的問題是 - 將代碼修改為版本 2 是否有任何額外好處或者這很好。

第一版（目前正在使用）-

const CartItems = ({ items }) => items.length ? items.map((x, i) => (
    <div key={x.id} className={`cart-item-${i}`}>
      <div className="card ">
        <div className="cart-item-img">
            <img src={x.url} alt={x.altText} className="img" />
        </div>
        <div className="cart-item-desc">
            <h3 className="title">{x.title}</h3>
            <p className="text">{x.shortDesc}</p>
        </div>
        <div className="cart-item-action">
            <button className="add">+</button>
            <button className="subtract">-</button>
            <button className="remove">X</button>
        </div>
      </div>
    </div>)) : []

第二版 -

const CartItems = ({ items }) => items.length ? items.map((x, i) => {
    const {
        id,
        url,
        altText,
        title,
        shortDesc
    } = x;
    return (
    <div key={id} className={`cart-item-${i}`}>
      <div className="card ">
        <div className="cart-item-img">
            <img src={url} alt={altText} className="img" />
        </div>
        <div className="cart-item-desc">
            <h3 className="title">{title}</h3>
            <p className="text">{shortDesc}</p>
        </div>
        <div className="cart-item-action">
            <button className="add">+</button>
            <button className="subtract">-</button>
            <button className="remove">X</button>
        </div>
      </div>
    </div>)
    }) : []

Answer 1

好處主要是審美和主觀的，所以如果你更喜歡第一個，你會得到更多的力量，而且沒有任何東西表明你需要改變它。

我對你發布的兩個片段的個人看法：我傾向於避免箭頭函數的直接返回，因為我經常需要添加日志或其他東西，而不得不來回轉換最終會讓你厭煩。 這與解構沒什么關系，除了解構迫使你有一個 function 主體和明確的回報。