React. js Оператор IF возвращает только первое условие - PullRequest
Новая
       153

React. js Оператор IF возвращает только первое условие

0 голосов
/ 10 июля 2020

У меня есть функция, которая выбирает, какой значок отображать, в зависимости от того, когда через 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 верны, и это так и не могу понять, что я делаю не так.

1 Ответ

0 голосов
/ 10 июля 2020

Вы используете единственный знак =, который является оператором присваивания . Чтобы проверить равенство в JS, используйте == для свободного равенства или === для строгого равенства (предпочтительно). 

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' }} />
    }
}
...