如何檢查一組名稱是否存在並使用反應在表格中顯示圖像

Question

我的要求是我有一個 json object 列表，我正在檢查 json 中的名稱，如果該名稱存在，我將顯示來自本地資產文件夾的圖像。 我的代碼在下面

After.map 顯示如下數據

 <td>
                      <div>
                        <img
                          src={
                            DynamicData.CompanyName.includes("Lenovo")
                              ? LenovoImage
                              : DynamicData.CompanyName.includes("Dell")
                              ? DellImage
                              : null
                          }
                          alt="img"
                          className="DataLogo"
                        />
                      </div>
                    </td>

那么，如果我有超過 2 個選項，我該如何顯示這種方法是否合適？ 還有其他方法嗎？

Answer 1

如果有很多值要檢查，這看起來更方便。

const imagesMapping = {
  Lenovo: LenoviImage,
  Dell: DellImage,
  // other values
}

const company = Object.keys(imagesMapping).find(name =>
  DynamicData.CompanyName.includes(name));

const image = company ? imagesMapping[company] : null; // instead of null better use a DefaultImage
const result = <img src={image} alt="img" className="DataLogo" />