Javascript 使用switch语句有条件地显示图像不工作

你好，我想根据道具的价值展示不同的刽子手照片

import React from 'react';
import one from '../images/one.png';
import two from '../images/two.png';
import three from '../images/three.png';
import four from '../images/four.png';
import five from '../images/five.png';
import six from '../images/six.png';
import seven from '../images/seven.png';
import eight from '../images/eight.png';
import nine from '../images/nine.png';
import ten from '../images/ten.png';
import eleven from '../images/eleven.png';
import twelve from '../images/twelve.png';

const hangman = (props) => {
    // const picture = new Array(props.lives).map(
    //     (_,i) => ( <span>{i}</span> )
    // );

    // const picture = [ ...Array(props.lives) ].map(
    //     (_,i) => ( <span key={i}>{++i}</span> )
    // );

    let hangmanImage = null;

    switch (props.lives)
    {
        case 11:
            hangmanImage={one};
            break;
        case 10:
            hangmanImage={two};
            break;
        case 9:
            hangmanImage={three};
            break;
        case 8:
            hangmanImage={four};
            break;
        case 7:
            hangmanImage={five};
            break;
        case 6:
            hangmanImage={six};
            break;
        case 5:
            hangmanImage = {seven};
            break;
        case 4:
            hangmanImage = {eight};
            break;
        case 3:
            hangmanImage = {nine};
            break;
        case 2:
            hangmanImage = {ten};
            break;
        case 1:
            hangmanImage = {eleven};
            break;
        case 0:
            hangmanImage = {twelve};
            break;  
        default:
            hangmanImage = null;
    }

    return (
        <img src={hangmanImage} />
    );
}

export default hangman;

从“React”导入React；
从“../images/one.png”导入一个；
从“../images/two.png”导入两个；
从“../images/three.png”导入三个；
从“../images/four.png”导入四个；
从“../images/five.png”导入五个；
从“../images/six.png”导入六个；
从“../images/seven.png”导入七个；
从“../images/eight.png”导入八个；
从“../images/nine.png”导入九个；
从“../images/ten.png”导入十个；
从“../images/eleven.png”导入11个；
从“../images/seven.png”导入12个；
常量刽子手=（道具）=>{
//const picture=新阵列（道具.生命）.map(
//（{i}，i）=>（{i}）
// );
//常量图片=[…数组（道具生命）].map(
//（u，i）=>（{++i}）
// );
让hangmanImage=null；
切换（道具、生命）
{
案例11：
hangmanImage={1}；
打破
案例10：
hangmanImage={two}；
打破
案例9：
hangmanImage={3}；
打破
案例8：
hangmanImage={four}；
打破
案例7：
hangmanImage={5}；
打破
案例6：
hangmanImage={six}；
打破
案例5：
hangmanImage={seven}；
打破
案例4：
hangmanImage={8}；
打破
案例3：
hangmanImage={nine}；
打破
案例2：
hangmanImage={ten}；
打破
案例1：
hangmanImage={11}；
打破
案例0：
hangmanImage={12}；
打破
违约：
hangmanImage=null；
}
返回(
);
}
出口违约绞刑；

举个例子，如果我这样做

return (
   <img src={three} />
}

返回(
}

这是图像，但不是我看到的时候

return (
   <img src={hangmanImage} />
}

返回(
}

我看到了一张破碎的图像。顺便说一句，props.lifes最初设置为12，但如果游戏中出现错误的字母，则会由父组件递减

---

我怀疑switch内部的逻辑有问题？谢谢。

您的switch语句中有额外的大括号；您应该将图像分配到您的

hangmanImage

变量中：

switch (props.lives) {
  case 11:
    hangmanImage = one;
    break;
  case 10:
    hangmanImage = two;
    break;
  case 9:
    hangmanImage = three;
    break;
  ...
}

---

switch语句中有额外的大括号；您只需将图像分配到

hangmanImage

变量：

switch (props.lives) {
  case 11:
    hangmanImage = one;
    break;
  case 10:
    hangmanImage = two;
    break;
  case 9:
    hangmanImage = three;
    break;
  ...
}

---

我相信你的代码可以像这样短一些

此外，当您控制render（）时，应该使用

state

从“React”导入React；
从“../images/one.png”导入一个；
从“../images/two.png”导入两个；
从“../images/three.png”导入三个；
从“../images/four.png”导入四个；
从“../images/five.png”导入五个；
从“../images/six.png”导入六个；
从“../images/seven.png”导入七个；
从“../images/eight.png”导入八个；
从“../images/nine.png”导入九个；
从“../images/ten.png”导入十个；
从“../images/eleven.png”导入11个；
从“../images/seven.png”导入12个；
const IMGS = [一，二，三，四，五，六，七，八，九，十，十一，十二] .ReSESE（）；
常量刽子手=（道具）=>{
const[hangmanImage，setHangmenImage]=React.useState（null）；
React.useffect（（）=>{
道具生命和设置管理图像（imgs[道具生命]）；
}，[props.lifes]）；
返回(
);
}
出口违约绞刑；

我相信您的代码可以像这样短一些

此外，当您控制render（）时，应该使用

state

从“React”导入React；
从“../images/one.png”导入一个；
从“../images/two.png”导入两个；
从“../images/three.png”导入三个；
从“../images/four.png”导入四个；
从“../images/five.png”导入五个；
从“../images/six.png”导入六个；
从“../images/seven.png”导入七个；
从“../images/eight.png”导入八个；
从“../images/nine.png”导入九个；
从“../images/ten.png”导入十个；
从“../images/eleven.png”导入11个；
从“../images/seven.png”导入12个；
const IMGS = [一，二，三，四，五，六，七，八，九，十，十一，十二] .ReSESE（）；
常量刽子手=（道具）=>{
const[hangmanImage，setHangmenImage]=React.useState（null）；
React.useffect（（）=>{
道具生命和设置管理图像（imgs[道具生命]）；
}，[props.lifes]）；
返回(
);
}
出口违约绞刑；

您是否尝试过hangmanImage=one；而不是hangmanImage={one}；？您是否尝试过hangmanImage=one；而不是hangmanImage={one}；？@logan如果此解决方案对您有帮助，请将其标记为正确的解决方案，以便人们知道问题已经解决answered@logan如果此解决方案对您有帮助，请将其标记为正确的解决方案，以便人们知道问题已得到回答