在 ReactJS 中传递 Props答案

【问题标题】：Passing of Props in ReactJS在 ReactJS 中传递 Props
【发布时间】：2020-09-15 00:12:57
【问题描述】：

以下是我在 React 组件中的 JSX 代码，它运行良好并且目前正在使用中，但在大多数 React 博客文章中，它们也在解构对象。我的问题是 - 将代码修改为版本 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>)
    }) : []

【问题讨论】：

我认为对象的解构是为了使用该对象的每个属性而不访问该对象。你不必每次都写 user.id, user.name，你可以只使用 id 和 name 等等
我个人发现解构有助于准确了解组件采用什么道具以及它们的形状，而不是逐个使用。
这是 100% 的偏好或您的团队的决定。试着坚持一种模式。就我个人而言，我更喜欢能够快速查看值的来源，因此我不会破坏 props 或 state。这样我就可以看到一个正在使用的值，并立即知道它要么是道具，要么是状态，要么是局部变量。但我知道有很多开发人员更喜欢完全相反的情况。他们更喜欢使用解构作为组件的一种文档。您可以立即看到该组件需要什么才能工作。只需选择一个并坚持下去。
我更喜欢使用prop-types，而不是解构作为组件规范，因为它更进一步，并且还通知开发人员所需的道具类型。

标签： javascript html reactjs ecmascript-6 jsx

【解决方案1】：

好处主要是审美和主观的，所以如果你更喜欢第一个，你可以得到更多的权力，没有什么说你需要改变它。

我对您发布的两个 sn-ps 的个人看法：我倾向于避免从箭头函数直接返回，因为我经常需要添加日志或其他内容，并且最终不得不来回转换。不过，这与解构无关，除了解构会强制您拥有函数体和显式返回。

【讨论】：