Извлечение действий из дочернего компонента в родительский - PullRequest
0 голосов
/ 14 апреля 2020

Я пытался создать приложение, основанное на реакциях, и мне непонятно, как решить эту ситуацию:

Допустим, у меня есть компонент с именем "SimpleTable", который обеспечивает, как следует из названия, простая таблица - для нее используются следующие параметры: «заголовки» (массив), «строки» (массив) и «разбиение на страницы» (bool)

Если paginated имеет значение false, то мы просто даем простую длинную таблицу - если это правда, мы разбиваем строки на несколько небольших таблиц и предоставляем кнопки для переключения назад / вперед - пока что все очень просто.

Теперь наступает сложная часть - я хочу, чтобы таблица иногда была просто таблицей в моем коде, и иногда я хочу обернуть его в элемент «карты». Я ввел новую опору для компонента под названием «asCard» (bool), которая изменяет вывод HTML и изменяет расположение кнопок prev / next.

Есть ли способ реверса таким образом, чтобы вместо «asCard» в моем компоненте у меня был компонент-обертка, в который я мог поместить что угодно, и он мог «извлечь» действия из дочернего компонента и поместить их в другое положение - таким образом я может иметь много разных компонентов, и не нужно было бы беспокоиться о том, чтобы на каждом из них была «asCard».

Я думаю, что, возможно, имеет компонент «Card», и в нем есть функция, которая называется что-то вроде «extractAction», а затем он передает его дочернему компоненту, а затем дочерний компонент проверяет реквизит «handleExtractAction», который затем передает элемент действия вместо использования его в своем собственном выводе. Но я не уверен, что это слишком сложный способ сделать это, и есть ли более разумный способ сделать это.

РЕДАКТИРОВАТЬ:

Я постараюсь добавить визуальный пример того, о чем я говорю

SimpleTable с нумерацией страниц:

          < >

item 1
------

item 2
------

item 3
------

item 4
------

item 5
------

SimpleTable внутри карты, с базовыми c parent> дочерними настройками:

------------------------
| card title           |
------------------------
|                      |
|           < >        |
|                      |
| item 1               |
| ------               |
|                      |
| item 2               |
| ------               |
|                      |
| item 3               |
| ------               |
|                      |
| item 4               |
| ------               |
|                      |
| item 5               |
| ------               |
------------------------

И результат, который я хотел бы получить вместо того, чтобы использовать «asCard» в каждом пользовательском компоненте, который я создаю.

------------------------
| card title        < >|
------------------------
|                      |
| item 1               |
| ------               |
|                      |
| item 2               |
| ------               |
|                      |
| item 3               |
| ------               |
|                      |
| item 4               |
| ------               |
|                      |
| item 5               |
| ------               |
------------------------
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...