Передайте элементы JSX компонентам через реквизиты
Обзор
С помощью шаблона Render Props мы передаем компоненты в качестве реквизитов другим компонентам. Компоненты, которые передаются как реквизиты, могут, в свою очередь, получать реквизиты от этого компонента.
Реквизиты рендеринга упрощают повторное использование логики в нескольких компонентах.
Если мы хотим реализовать поле input, с помощью которого пользователь может конвертировать температуру из градусов Цельсия в градусы Кельвина и Фаренгейта, мы можем использовать свойства рендеринга renderKelvin и renderFahrenheit.
Эти реквизиты получают value входных данных, которые они преобразуют в правильную температуру в K или °F.
Компромиссы:
Повторное использование. Поскольку реквизиты рендеринга каждый раз могут быть разными, мы можем сделать компоненты, которые получают реквизиты рендеринга, пригодными для повторного использования в различных случаях.
Разделение проблем: мы можем отделить логику нашего приложения от компонентов рендеринга с помощью реквизитов рендеринга. Компонент с состоянием, который получает свойство рендеринга, может передавать данные компонентам без состояния, которые просто отображают данные.
Решение проблем с HOC: поскольку мы явно передаем реквизиты, мы решаем проблему с неявными реквизитами HOC. Все реквизиты, которые должны быть переданы элементу, видны в списке аргументов реквизита рендеринга. Мы точно знаем, откуда берутся те или иные реквизиты.
Нет необходимости в хуках: хуки изменили способ, которым мы можем добавить повторное использование и совместное использование данных для компонентов, что во многих случаях может заменить шаблон реквизита рендеринга.
Ссылайтесь на практическую реализацию по ссылке
Для дальнейшего чтения нажмите здесь.
