Блог

Главная - Вопросы по программированию - Логика для простого случая переключения в React

Логика для простого случая переключения в React

#reactjs #switch-statement

#reactjs #оператор переключения

Вопрос:

Мне нужно изменить компонент, который отображается в зависимости от значения флага. 0 равно нулю, но 1 и 2 будут генерировать один и тот же компонент, но с другим пользовательским сообщением.

Я пытался собрать переключатель по частям, но я не получаю никакого вывода на консоль.

 switch (flagValue) {
            case 1: 
                console.log('1')
                break;
            case 2:
                console.log('2 or 5')
                break;
            default:
                break;
        }

Возможно, я здесь не совсем прав ^^

Это код, для которого я пытаюсь использовать вариант переключения. <AlertBox> Содержимое компонента будет меняться в зависимости от case:1 или case:2 

 if (flagValue !== 0) {
            return null;
        } else
            return (
                <AlertBox
                    title={`Your ${
                        this.props.Year
                    } Payment Has Not Been Processed`}
                    content={
                        <span>
                            custom text here
                            <b>
                                {` ${this.props.month}`} 15,{' '}
                                {`${this.props.currentYear}`}{' '}
                            </b>
                        </span>
                    }
                    headerLevel={2}
                />
            );

Комментарии:

1. Вы можете найти эту библиотеку react: npmjs.com/package/react-floco полезно, если в будущем вам потребуется выполнять рендеринг с помощью операторов switch / case

Ответ №1:

если вам явно нужны только значения 1 и 2, вы можете использовать простой условный рендеринг. Обратите внимание, что это, вероятно, становится довольно уродливым, как только вы добавляете больше обращений.

 return (
    <AlertBox
        title={`Your ${
            this.props.Year
            } Payment Has Not Been Processed`}
        content={
            <span>
                {flagValue === 1 amp;amp; 'Custom Message 1'}
                {flagValue === 2 amp;amp; 'Custom Message 2'}
                <b>
                    {` ${this.props.month}`} 15,{' '}
                    {`${this.props.currentYear}`}{' '}
                </b>
            </span>
        }
        headerLevel={2}
    />
);

Ответ №2:

Вы проверили, что значение флага является числом, а не строкой? Операторы переключения используют строгое равенство === .

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch