Comments 13
Всё таки это чаще используется для рендера массива данных, но когда нужна так же некоторая логика (к примеру фильтрация) из дочернего компонента.
К примеру: https://reactnative.dev/docs/flatlist#required-renderitem
Если рендер проп используется для рендера компонента с данными из дочернего, то я чаще встречал когда метод передается в качестве children, а не кастомного пропса.
К примеру: https://www.react-spring.dev/docs/components и https://v5.reactrouter.com/web/api/match/null-matches
Т.е. по факту это скрывает реализацию. Отсюда вытекают плюсы и минусы.
Нуу и не хватает разбора с подходом в виде проброса компонента вместо функции. Т.е. сравнение проброса компонента, который принимает такие же пропсы, как и аргументы пробрасываемой функции.
Всё таки это чаще используется для рендера массива данных
Да, мне все же кажется пробрасывать внутрь функцию отрисовки, то уж либо для отрисовки списка или что то вроде того или отрисовать по условию. Причем я как то делал наоборот, дочерняя компонента, говорила родителю, как отрисовать кнопку экспорта документа.
А пробрасывать компонент, это уже безусловная отрисовка, и да, я чаще видел и использовал children + плюс общий контекст.
А пробрасывать компонент, это уже безусловная отрисовка
Почему же? =)
<List renderItem={(item) => <ListItem item={item} />} />
<List ListItem={ListItem} />Сравнение двух подходов, когда у нас в качестве рендера передается функция и когда в качестве рендера передается компонент.
Возможно вы компонент перепутали с элементом?
Спасибо, полезный комментарий!
Спасибо большое за такой развёрнутый и конструктивный комментарий! Полностью согласен.
Хорошая статья. Еще можно это использовать при отрисовке попапов и модальных окон (параметром передавать контент попапа).
И рендеринга можно передавать и функцию, и компонент и элемент, как и писалось выше. Есть разные плюсы у разных методов.
П.С. У вас "Плюсы пользовательских хуков" дважды в конце.
Главная смысл шаблона - передача в качестве props функции, которая будет принимать какие-то данные от дочернего компонента и отрисовывать их так, как будет указано в родительском.
Перечитал это предложение 10 раз. Что это по-русски?
Здравствуйте, спасибо за замечание! Постарался составить максимально неразмытое и наиболее полное описание со своей точки зрения, как бы вы его улучшили?
Не понятна цепочка движения данных по тексту. Передача в качестве props функции куда?
Зачем нужен шаблон Render props в React?