Как исправить «Не вкладывать троичные выражения» для условного рендеринга компонентов [закрыто] ⇐ Javascript

[Гость]

Приведенный ниже код eslint вызывает некоторую ошибку

{authModal.mode === 'вход' ? : authModal.mode === 'зарегистрироваться'? : } Ошибка: не вкладывать троичные выражения. eslint(без вложенных троичных)

Я придумал 3 способа избежать этой ошибки:
[*]проверьте каждый случай
{authModal.mode === 'login' && } {authModal.mode === 'регистрация' && } {authModal.mode === 'forgotPassword' && } [*]if/else внутри функции {(() => { if (authModal.mode === 'вход') { вернуть ; } if (authModal.mode === 'регистрация') { вернуть ; } вернуть ; })()} [*]переключение регистра внутри функции {(() => { переключатель (authModal.mode) { случай 'логин': вернуть ; регистр случая: вернуть ; случай «забыли пароль»: вернуть ; по умолчанию: выдать новую ошибку («Неверный режим аутентификации»); } })()} Помимо того, чтобы избежать ошибки, я хочу решить следующее. Предполагая, что эти 3 компонента являются тяжелыми компонентами (с точки зрения производительности), Я хотел бы знать лучшее решение, которое лучше всего подходит для производительности. Пожалуйста, дайте мне знать, если есть альтернативное решение.