html - 动态背景图片 react

我试图根据backgroundImage的值动态选择item.imageLinks.smallThumbnail。

如果我的API返回的数组具有smallThumbnail URL，那么我想将其用作backgroundImage或在backgroundImage中使用book.png的本地默认../public。

以下是我的代码，但是当item.imageLinks.smallThumbnail为undefined且未使用备用book.png时却无法使用，但出现错误：

Type Eror: Cannot Read 'smallThumbnail of undefined

请帮忙。

谢谢

return(
        <ol className="books-grid">
          {book.map( (item)  => (
              <li key={item.id}>
                <div className="book">
                  {item.shelf && (
                      <div className="book-top">
                        <div
                          className="book-cover"
                          style={{ width: 128, height: 193, backgroundImage: `url({${item.imageLinks.smallThumbnail} || ../public/book.png } )` }}></div>

最佳答案

由于您的imageLinks本身不是属性，因此可以这样处理：

let imageUrl = item.imageLinks ? item.imageLinks.smallThumbnail : '../public/book.png';

return(
  <ol className="books-grid">
    {book.map( (item)  => (
        <li key={item.id}>
          <div className="book">
            {item.shelf && (
                <div className="book-top">
                  <div
                    className="book-cover"
                    style={{ width: 128, height: 193, backgroundImage: `url(${imageUrl})` }}></div>