使用switch语句有条件地显示图像不起作用答案

【问题标题】：React Conditionally show image using switch statement not working使用switch语句有条件地显示图像不起作用
【发布时间】：2019-12-05 00:47:10
【问题描述】：

您好，我正在尝试根据 props.lives 的值显示不同的刽子手图片。

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;

例如，如果我这样做，

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

这显示了图像。但不是当我这样做时，

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

我显示损坏的图像。顺便说一句，props.lives 最初设置为 12，但如果在游戏中播放错误的字母，则会由父组件递减。

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

【问题讨论】：

你试过hangmanImage=one;而不是 hangmanImage={one};?

标签： javascript reactjs switch-statement

【解决方案1】：

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

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

【讨论】：

@logan 如果此解决方案对您有帮助，请将其标记为正确，以便人们知道问题已得到解答

【解决方案2】：

我相信你的代码可以像这样更短。

此外，当您控制 render() 事物时，您应该使用state。

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 imgs = [one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve].reverse();
const hangman = (props) => {
    const [hangmanImage, setHangmenImage] = React.useState(null);
    React.useEffect(()=>{
      props.lives && setHangmanImage(imgs[props.lives]);
    },[props.lives]);


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

export default hangman;

【讨论】：