主页 / 问题 / 1245536
Accepted
Dan
Asked:2022-02-18 16:44:06 +0000 UTC2022-02-18 16:44:06 +0000 UTC

如何制作更漂亮的格式？

  • 772
<div className="catalog-mobile__counter" key={cart.find(item => item.product._id === product._id) ? cart.find(item => item.product._id === product._id).quantity : "" }>
              <div className="catalog-mobile__minus"></div>
              <input type="text" defaultValue={cart.find(item => item.product._id === product._id) ? cart.find(item => item.product._id === product._id).quantity : "" } />
              <div className="catalog-mobile__plus"></div>
          </div>

我该如何重构这段代码。这里有一个条件检查，因为不是所有的项目都会产生结果，并且有些未定义和错误，所以它是，但它看起来很糟糕。

reactjs

1 个回答

  1. Best Answer

    如果我是你，我会用JSX. 在哪里key给出了类似id或独特的价值。有人猜测它quantity可能会再次发生。可选的链接可用于缩短代码。

    const cartQuantity = cart.find(item => item.product._id === product._id)?.quantity || '';

return (
    <div className="catalog-mobile__counter" key={cartQuantity}>
        <div className="catalog-mobile__minus"></div>
        <input type="text" defaultValue={cartQuantity} />
        <div className="catalog-mobile__plus"></div>
    </div>
)

    如果您在使用 babel 时遇到错误，请安装以下组件[更多]：

      npm install --save-dev @babel/plugin-proposal-optional-chaining
    • 1

相关问题