如何检查一组名称是否存在并使用反应在表格中显示图像

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" />