Question

我有一个函数，可以根据传递memType的时间来选择要显示的图标：

const renderAvatar = (memType) => {
    if ((memType = "Music")) {
        return <MusicIcon style={{ color: 'white' }} />
    } else if ((memType = "Movie")) {
        return <MovieIcon style={{ color: 'white' }} />
    } else if ((memType = "TVShow")) {
        return <TVIcon style={{ color: 'white' }} />
    } else if ((memType = "Game")) {
        return <GameIcon style={{ color: 'white' }} />
    } else if ((memType = "Event")) {
        return <EventIcon style={{ color: 'white' }} />
    }
}

但是，它仅返回处于顶部的任何条件的图标（上例中的MusicIcon）。例如，只有在第一个条件下，它才会显示MovieIcon：

const renderAvatar = (memType) => {
        return <MovieIcon style={{ color: 'white' }} />
    } else if ((memType = "TVShow")) {
    if ((memType = "Music")) {
        return <MusicIcon style={{ color: 'white' }} />
    } else if ((memType = "Movie")) {
        return <TVIcon style={{ color: 'white' }} />
    } else if ((memType = "Game")) {
        return <GameIcon style={{ color: 'white' }} />
    } else if ((memType = "Event")) {
        return <EventIcon style={{ color: 'white' }} />
    }
}

我已经检查过传递的memType数据正确无误，并且无法解决我做错的事情。

Answer 1

您正在使用单个=符号，即assignment operator。要检查JS中的相等性，请使用== for loose equality或=== for strict-equality（首选）。

const renderAvatar = (memType) => {
    if ((memType === "Music")) {
        return <MovieIcon style={{ color: 'white' }} />
    } else if ((memType === "TVShow")) {
    if ((memType === "Music")) {
        return <MusicIcon style={{ color: 'white' }} />
    } else if ((memType === "Movie")) {
        return <TVIcon style={{ color: 'white' }} />
    } else if ((memType === "Game")) {
        return <GameIcon style={{ color: 'white' }} />
    } else if ((memType === "Event")) {
        return <EventIcon style={{ color: 'white' }} />
    }
}

React.js IF语句仅返回第一个条件

1 个答案: