REACT - рендеринг условного переключателя, паттерн должен быть идентифицирован

Я только что видел этот отличный способ переключения, передавая объект как call? или apply? к другому объекту. Есть ли у этого шаблона имя в обычном Javascript? Я бы хотел прочитать об этом, чтобы лучше понять, как это работает в React:

this.state = {
    nav: content1,
}

render() {
    return (
        <section>
            {{
                content1: <content1 />,
                content2: <content2 />,
                content3: <content3 />,
            }[this.state.nav]}
        </section>
    );
}

Это нормальный Javascript является. Он просто получает доступ к свойству сразу, без необходимости сначала создавать объект, а ЗАТЕМ получить к нему доступ. Таким образом, вместо let obj = {...}; let val=obj[key]; вы можете сразу использовать ключ на необработанном объекте: let val = {...}[key];

— 21.05.2018 06:26

javascript reactjs

21.05.2018 06:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это просто объект внутри JSX.

{{
   content1: <content1 />,
   content2: <content2 />,
   content3: <content3 />,
}[this.state.nav]}

Такой же как

{favSnack: “Apple”}[‘favSnack’]

Обязательно используйте прямые кавычки, а не так называемые умные кавычки.

— 21.05.2018 06:25

21.05.2018 06:24

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

Здесь JSX рассматривается как объекты JSON, заключенные в фигурные скобки {}.

Ключи и значения разделяются двоеточием. Вы можете получить доступ к значениям объекта, используя запись с точкой (.):

myObj = { "name":"John", "age":30, "car":null };
x = myObj.name;

You can also access the object values by using bracket ([]) notation:
myObj = { "name":"John", "age":30, "car":null };
x = myObj["name"];

Спасибо за дальнейшие объяснения. (лицо => ладонь) Теперь я это вижу. JSX иногда портит мне голову !!

— 21.05.2018 10:12

21.05.2018 07:28