reactjs - 将动作从子组件提取到父组件

Question

我一直在尝试构建一个基于反应的应用程序，但我不知道如何解决这种情况：

假设我有一个名为“SimpleTable”的组件，顾名思义，它提供了一个简单的表格——它的道具是“标题”（数组）、“行”（数组）和“分页”（布尔）

如果分页是假的，那么我们只给出一个简单的长表 - 如果它是真的，我们将行分块到多个小表中，并提供按钮来切换上一个/下一个 - 到目前为止就这么简单。

现在到了具有挑战性的部分——有时我想在我的代码中将表格作为一个表格，有时我想将它包装在一个“卡片”元素中。我为组件引入了一个名为“asCard”（bool）的新道具，它改变了 HTML 的输出，并改变了 prev/next 按钮的放置位置。

有没有办法扭转这种情况，这样我的组件中就不会有“asCard”，而是有一个可以放入任何东西的包装器组件，它可以从子组件中“提取”动作，并将它们放在一个不同的位置 - 这样我可以拥有许多不同的组件，而不必担心每个组件上都有“asCard”。

我在想可能有一个“卡片”组件，其中有一个名为“extractAction”之类的函数，然后将其传递给子组件，然后子组件检查一个名为“handleExtractAction”的道具" 然后将动作元素传递给，而不是在自己的输出中使用它。但我不确定这是否是一种过于复杂的方法，以及是否有更明智的方法。

编辑：

我将尝试添加一个视觉示例来说明我正在谈论的内容

带分页的 SimpleTable：

          < >

item 1
------

item 2
------

item 3
------

item 4
------

item 5
------

卡片内的 SimpleTable，具有基本的父>子​​设置：

------------------------
| 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               |
| ------               |
------------------------

标签： reactjsdesign-patterns