Как сделать постоянное имя переменной в 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
Поддержите его: reactjs.org/docs/components-and-props.html
Ответы 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 />. Я не верю, что это возможно с реквизитом?
тогда вам понадобится карта объекта, например const letterMap = { A: <A />, B: <B />, ... }; render(letterMap[letter]);, если я правильно понимаю.
Теперь я понимаю, что пытался решить не ту проблему. Было бы неразумно использовать изображения для хранения букв, когда я могу использовать предложенный вами метод и избавиться от большого количества ненужного кода. Спасибо (:
Я думал, что у вас будут необычные ограничения, и вы должны сделать это, как указано выше. Рад, что ты наконец понял. :)
Отдельные константы для каждой буквы — это неправильный способ сделать что-то. Создайте объект, ключами которого будут буквы, а значением каждой клавиши будет функция, которую вы хотите.