Состояние, свойства, функции обратного вызова, неявный возврат и все хорошее.
Вступление
Несколько недель назад Изабель К. Ли и я дистанционно запрограммировали пару и создали новостное приложение под названием Hegelian Bagel. Hegelian Bagel - это одностраничное приложение, в котором пользователям предоставляется поток статей. Мы разработали его, используя React.js в интерфейсе и Ruby on Rails в бэкэнде, который извлекается из API новостей.
В этом посте я углублюсь в две основные функции новостного приложения Hegelian Bagel - «тегирование» и переключатель COVID. Я немного расскажу о функции тегов, прежде чем более подробно расскажу о создании переключателя в React с использованием состояния, свойств и обратного потока данных между дочерним и родительским компонентами.
Для начала я хочу поговорить о функции тегов, потому что я думаю, что это довольно круто и объясняет название приложения. Он требует тех же функций, что и кнопка переключения, поэтому, если вы знаете одну, вы будете знать и другую. Эта функция позволяет пользователям «помечать» новостные статьи. Эти теги могут быть конкретными, например «Жизни черных имеют значение», или более общими, например «Политика ЕС».
После создания этого тега он отображается вверху общей ленты новостей вместе с другими тегами тенденций. Новые пользователи, входящие на сайт, теперь могут фильтровать свою ленту новостей, нажимая на новые теги. Это создает категоричный и тщательно подобранный пользовательский интерфейс для чтения новостей, отсюда «гегельянский», и, поскольку это новостное приложение, мы ожидаем, что пользователи будут просматривать его утром с кофе и рогаликом!
Теперь я собираюсь углубиться в создание переключателя COVID. В верхней части ленты новостей мы создали кнопку-переключатель, которая позволяет пользователю отфильтровывать все статьи, связанные с новостями о COVID-19. К вашему сведению, все это делается во внешнем интерфейсе с использованием условного рендеринга в DOM, поэтому нет необходимости возиться с сервером!
Шаг 0. Настройка
В папке src вашего приложения React создайте компонент переключателя. В этом примере мы назвали наш дочерний компонент CovidToggle.jsx, а родительский компонент - это файл App.js. Мы импортировали CovidToggle.jsx в верхнюю часть файла App.js. (Я привожу ссылку здесь на наш репозиторий GitHub, чтобы вы могли взглянуть на код в качестве справки!)
Вот параллельное сравнение наших компонентов App.js и CovidToggle.jsx:
(Вы можете создать CovidToggle как функциональный компонент, поскольку мы не будем инициализировать состояние, но здесь мы использовали компонент класса.)
Шаг 1. Создайте кнопку в HTML / CSS.
Во-первых, вам нужно создать саму кнопку-переключатель, используя HTML / CSS в блоке возврата дочернего компонента. Мы используем библиотеку Semantic React CSS, но и настраиваемый HTML / CSS тоже работает.
После того, как вы нажмете кнопку-переключатель в вашем интерфейсе, мы сможем начать кодирование некоторых функций! Для справки вот как выглядит наша кнопка:
Шаг 2. Создайте управляемый компонент, используя состояние и свойства.
В файле App.js инициализируйте состояние, создайте ключ с логическим значением и установите это значение равным false. Затем создайте метод, обрабатывающий это значение. Мы назвали наш метод → handleCovidCheck.
Аргумент, который принимает handleCovidCheck, должен исходить от дочернего компонента CovidToggle, отсюда и название inputFromChild. Цель здесь - всякий раз, когда пользователь нажимает на эту кнопку-переключатель, он должен переключать это логическое значение в компоненте App с false на true или наоборот. Функция setState заставляет React повторно отрисовывать ваше приложение и обновляет DOM. Он принимает предыдущее состояние и текущие свойства вашего компонента App.js, используя их для вычисления и возврата следующего состояния.
После их создания передайте свой метод дочернему компоненту в качестве свойств.
Шаг 3. Работаем с props в дочернем компоненте
Теперь добавьте прослушиватель событий в свой тег ввода. Кнопки в React используют onChange (см. Документацию). Это событие вызовет метод, который вы создадите в дочернем компоненте. Мы устанавливаем наше событие onChange равным handleToggle. Этот метод в дочернем компоненте будет обрабатывать реквизиты, переданные от родителя, и передавать реквизиты обратно родительскому компоненту, создавая управляемый компонент с использованием логики обратного потока данных.
Как видите, метод получает доступ к реквизитам, переданным дочернему элементу, путем вызова this.props.handleCovidCheck и принимает в качестве аргумента событие «проверки». Затем evt.target.checked передается обратно в строку 11 вашего файла App.js в качестве аргумента, inputFromChild,toggling логического значения состояния. Если у вас все это работает, вы эффективно реализовали обратный поток данных, используя состояние и свойства между родительскими и дочерними компонентами!
К вашему сведению, на протяжении всего этого процесса, когда вы создаете управляемый компонент, полезно, чтобы консоль регистрировала значение вашего состояния между блоками render () и return, чтобы получить представление о том, каково ваше состояние в App.js. меняется.
Шаг 4. Фильтрация результатов
Большая часть логики обратного потока данных уже реализована. Как вы хотите поступить дальше, зависит от характера вашего проекта. Для нашего проекта нам нужна была кнопка для фильтрации статей. Если ваш проект похож, применима та же логика. Вам нужно будет решить, какой массив статей отфильтровать, а какие отобразить в DOM. В общем, мы назвали наш метод decideWhichArrayToRender.
Как видите, я включил в свой App.js другие части, в том числе метод жизненного цикла componentDidMount, который извлекает статьи из моего бэкэнда Rails. Этот метод жизненного цикла заполняет пустой массив в моем состоянии ключом articles.
Для метода resolveWhichArrayToRender в строке 29 я деконструирую covidCheck и статьи из this.state → это всего лишь удобный инструмент в ES6 JavaScript, позволяющий содержать имена переменных в чистоте.
Я закомментировал некоторые места в строках 31–32 для условной логики. В зависимости от характера вашего проекта вы могли бы использовать эти строки для фильтрации большого массива статей, элементов или результатов и передать этот метод дочернему компоненту, который отвечает за отрисовку списка в DOM.
Я продемонстрирую, что мы здесь сделали:
… И это действительно все, что вам нужно сделать, чтобы создать управляемый компонент в React, который переключает и фильтрует с помощью обратного потока данных в ES6.
Надеюсь, что это руководство было полезным, и, если у вас возникнут вопросы, обращайтесь к нам. Удачной разработки! ☀️
Использованная литература:
