Возврат нескольких значений в случае переключателя с использованием response.js

Question

Я использую регистр переключателя для отображения текста на основе значения регистра.В дополнение к тексту я также хочу добавить значок.Таким образом, для конкретного случая будет значок, а рядом с ним будет соответствующий текст.

Чтобы реализовать это, я добавляюзначок и текст в ответном сообщении о состоянии дела.

     case 'DENIED':
       return <Square /> + intl.formatMessage(messages.processDenied);
     case 'CANCELLED':
       return <CloseIcon color='red' /> + intl.formatMessage(messages.processCancelled);
     case 'INCOMPLETE':
       return <HourglassIcon /> + intl.formatMessage(messages.processIncomplete);
     default:
        return intl.formatMessage(messages.processApproved);
}

Когда я использую вышеуказанную логику, я получаю

Вместоотображения значка, он отображает [объект, объект].Могу ли я не использовать знак «+» для объединения двух элементов?Если да, то как мне вернуть оба элемента за один возврат?

Answer 1

Могу ли я не использовать знак "+" для объединения двух элементов?

Нет, это выполняет конкатенацию строк. Элемент React - это объект, а не строка. Строковое представление объекта по умолчанию - [object Object], поэтому вы получаете этот вывод.

Если это так, как мне вернуть оба элемента за один возврат?

Либо используйте фрагмент , либо поместите оба элемента в другой:

// fragment
return <><Square /> {intl.formatMessage(messages.processDenied)}</>;

// children of another element
return <span><Square /> {intl.formatMessage(messages.processDenied)}</span>;