根据数据库返回的值有条件地渲染图像源

Question

试图根据数据库返回的值的价值，将我的头缠绕着更改图像源的过程。

摘要：

function KnifesComponent() {

  const knifeCollection = collection(db, "knives");
  const [knives, setKnives] = useState([]);
  
  useEffect(() => {
    onSnapshot(knifeCollection, (snapshot) => {
      setKnives(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    });
  }, []);  

  return (
      {knives.map((skin) => {
        return (
           {skin.rarity} // Returns "Ultra" for Example
           <div><img src={isUltra : require('../../public/Rarity_Ultra.png')}></div>
           
  );
}

我正在考虑制作具有所有值的const，然后根据需要使用所有值，但不确定如何确切地接近它

  const rarities = {
    Exclusive: require('../../public/Rarity_Exclusive.png'),
    Ultra: require('../../public/Rarity_Ultra.png'),
  }

是什么是根据值将不同图像进行条件格式化不同图像的正确方法？

Answer 1

您可以将稀有物对象更改为此（路径为值）：

const rarities = {
  Exclusive: '../../public/Rarity_Exclusive.png',
  Ultra: '../../public/Rarity_Ultra.png',
}

然后，您可以通过稀有性访问对象的图像。

function KnifesComponent() {

  const knifeCollection = collection(db, "knives");
  const [knives, setKnives] = useState([]);
  
  useEffect(() => {
    onSnapshot(knifeCollection, (snapshot) => {
      setKnives(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    });
  }, []);  

  return (
    {
      knives.map((skin) => {
        return (
          {skin.rarity} // Returns "Ultra" for Example
          <div>
            <img src={require(rarities[skin.rarity])}>
          </div>
        );
      })     
    }
  );
}

对象也可以是这样（只有图像名称）：

const rarities = {
  Exclusive: 'Rarity_Exclusive.png',
  Ultra: 'Rarity_Ultra.png',
}

并访问它们：

<img src={require(`../../public/${rarities[skin.rarity]}`)}>