React Native Data Structure and Conditions.
Обходной переключатель If-else в React Native (ES6)
Всем привет, Собан Аршад с вами. Вот в этой теме мы поговорим о силе объектов в js, сейчас я работаю в React Native, нахожу здесь объекты очень полезными. Большую часть сложной условной логики я могу обойти, используя объекты.
Просто прочитайте эти строки кода и не беспокойтесь, понимаете вы их или нет. Позже я объясню это.
Это многоразовый компонент react-native-vector-icons,
Вам просто нужно вызвать его и указать тип значка, имя значка, и значок будет отображаться.
импортировать React из «реагировать»;
импортировать AntDesign из «react-native-vector-icons/AntDesign»;
импортировать EvilIcons из «react-native-vector-icons/EvilIcons»;
импортировать Entypo из «react-native-vector-icons/Entypo»;
импортировать FontAwesome из «react-native-vector-icons/FontAwesome»;
импортировать Fontisto из «react-native-vector-icons/Fontisto»;
импортировать Ionicons из «react-native-vector-icons/Ionicons»
импортировать MaterialCommunityIcons из ‘react-native-vector-icons/MaterialCommunityIcons’
константные типы = {
«МуравейДизайн»: МуравейДизайн,
«Злые иконы»: злые иконы,
«Энтипо»: Энтипо,
«FontAwesome»: FontAwesome,
«Фонтисто»: Фонтисто,
«иониконы»: иониконы,
«MaterialCommunityIcons»: MaterialCommunityIcons
}
значок экспорта по умолчанию = ({ тип, имя, цвет, размер }) => {
// это также можно сделать, как показано ниже, и записать свойства в качестве параметра
// const { тип, имя, цвет, размер } = реквизит
const Icon = типы[тип]
возвращение (
имя = {имя}
цвет = {цвет}
размер = {размер}
/>
)
}
Неудивительно. Это так просто. давайте обсудим с некоторыми примерами.
Допустим, мы имеем дело с условием if-else.
Я говорю, если ввод «a», верните это A, иначе, если ввод «b», верните это B. и до z.
давайте напишем код.
постоянный ввод;
если (ввод === 'а')
{
вернуть «Это А»
}
иначе если ( ввод === 'b' )
{
вернуть «Это Б»
}
иначе если (ввод === 'c')
{
вернуть «Это C»
}
.
.
.
еще {
вернуть «Это Z»
}
хорошо, мы пишем для 26 условий и это примерно 150 строк кода.
Так много платить, верно?
Давайте перейдем к состоянию переключения.
постоянный ввод;
переключатель (вход)
случай «а»:
вернуть «Это А»
случай «б»:
вернуть «Это Б»
случай «в»:
вернуть «Это C»
.
.
.
случай ‘з’:
вернуть «Это Z»
При таком подходе мы написали почти 60 строк.
Мы также можем использовать Turnary Operator здесь, но только подумайте, Turnary Operator для условия 26… он загорится.
Итак, что нам предлагает js.
Здесь начинается настоящее волшебство объектов:
постоянный ввод;
пусть объект = {
«а»: «Это А»,
«б»: «Это Б»,
«с»: «Это С»,
.
.
.
«Z»: «Это Z»
}
Теперь, чтобы получить желаемую строку в соответствии с вводом
console.log(объект[ввод]);
БУМ , , , Вы видите волшебство.
В частности, говоря о React или React Native, вы можете хранить любую строку, любой целочисленный элемент, любой компонент, как значение ключа,
объект в основном представляет собой пару ключ-значение.
Это очень просто, но очень мощно. Это использует очень меньше циклов для завершения по сравнению с другими. Нужно использовать его.
Теперь перейдем к фрагменту, который я написал вверху.
импортировать React из «реагировать»;
импортировать AntDesign из «react-native-vector-icons/AntDesign»;
импортировать EvilIcons из «react-native-vector-icons/EvilIcons»;
импортировать Entypo из «react-native-vector-icons/Entypo»;
импортировать FontAwesome из «react-native-vector-icons/FontAwesome»;
импортировать Fontisto из «react-native-vector-icons/Fontisto»;
импортировать Ionicons из «react-native-vector-icons/Ionicons»
импортировать MaterialCommunityIcons из ‘react-native-vector-icons/MaterialCommunityIcons’
константные типы = {
«МуравейДизайн»: МуравейДизайн,
«Злые иконы»: злые иконы,
«Энтипо»: Энтипо,
«FontAwesome»: FontAwesome,
«Фонтисто»: Фонтисто,
«иониконы»: иониконы,
«MaterialCommunityIcons»: MaterialCommunityIcons
}
значок экспорта по умолчанию = ({ тип, имя, цвет, размер }) => {
// это также можно сделать, как показано ниже, и записать свойства в качестве параметра
// const { тип, имя, цвет, размер } = реквизит
const Icon = типы[тип]
возвращение (
имя = {имя}
цвет = {цвет}
размер = {размер}
/>
)
}
В стартовых строках я просто импортирую иконки, после этого.
В константных типах я сохраняю строку вместо импортированных значков.
А при вызове я просто говорю types[type] и получаю импортированный значок, который сохраняется вместе с ключом типа объекта типов. И тип приходит как строка из файла, который я вызвал.
Допустим, Fontisto появляется как строка внутри типа, когда я говорю types[type] это означает, что я говорю об этой строке 'Fontisto': Fontisto, так просто, я обошел if-else, переключатель и поворотник, чтобы получить решение, вместо этого я просто использовал силу объекта в Js.
Надеюсь, вам понравилась статья.
Это все!!!
Надеюсь, вам понравилось, любые неясности/сомнения приветствуются, любезно прокомментируйте свои проблемы, и мы решим их как можно скорее.
Эта статья написана Собаном Аршадом на основе его личного опыта.
ты можешь поймать меня через sobanarshad85
Аплодисменты / Критики ждут. . .
Гитхаб | линкедин | фейсбук | твиттер | [email protected]
