Как сделать постоянное имя переменной в React

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

ПРИМЕР: Сэм = 'S'

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

Вот как выглядит мой код.

function foo() {
var obj = JSON.parse(localStorage.getItem('user'));
let firstName = obj[0].firstName;
let letter = firstName.charAt(0).toUpperCase();
render ( <S /> )
}

const S = () =>
<span className="profile-icons" style={{'backgroundPosition': '0 -576px',}} />
...
A-Z

Отдельные константы для каждой буквы — это неправильный способ сделать что-то. Создайте объект, ключами которого будут буквы, а значением каждой клавиши будет функция, которую вы хотите.

Pointy 16.05.2022 19:42

Поддержите его: reactjs.org/docs/components-and-props.html

catgirlkelly 16.05.2022 19:48
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
2
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете просто реализовать это с помощью реквизит. Просто не забудьте дать ему правильный стиль.

const ProfileIcon = ({ letter }) => {
  return (
    <span className="profile-icons" style={{'backgroundPosition': '0 -576px',}}>
      {letter}
    </span>
  );
}
render (<ProfileIcon letter={letter} />)

reactjs.org/docs/components-and-props.html

Вы правы, что это показывает значок S с буквой, однако это не совсем то, что я искал. У меня есть такие константы, как A, B, C,... Z, и я хочу сопоставить каждую константу со строковым значением буквы. Итак, если буква = a, то отображается <A />. Я не верю, что это возможно с реквизитом?

paq 17.05.2022 00:24

тогда вам понадобится карта объекта, например const letterMap = { A: <A />, B: <B />, ... }; render(letterMap[letter]);, если я правильно понимаю.

Jae 17.05.2022 03:11

Теперь я понимаю, что пытался решить не ту проблему. Было бы неразумно использовать изображения для хранения букв, когда я могу использовать предложенный вами метод и избавиться от большого количества ненужного кода. Спасибо (:

paq 17.05.2022 03:42

Я думал, что у вас будут необычные ограничения, и вы должны сделать это, как указано выше. Рад, что ты наконец понял. :)

Jae 17.05.2022 03:49

Другие вопросы по теме