React相似的组件设计

Question

假设我想创建一系列页面，只是主体部分不同，它们的页眉和页脚是相似的。身体有各种各样的形式。页脚是一些按钮，如保存和取消按钮。我正在考虑创建包含页眉和页脚的通用页面，并注入不同的主体，如下所示(伪代码)：

<page body={body1()} />
<page body={body2()} />

const page = (body) => {
  <header />
  {body}
  <footer />
}

const header = () => {
  return <h1>Header</h1>;
}

const footer = () => {
return (
  <div>
    <button>Save<button>
    <button>Cancel<button>
  </div>
 );
}

const body1 = () => {
   //several input, selector
}

const body2 = () => {
   //several input, selector
}

我的问题是，如果正文和页脚是分开的，当单击保存按钮时，页面如何知道正文字段中的哪些信息需要保存？(页面没有正文中的信息，或者页面如何知道正文中需要知道哪些信息)通过将正文提取为单独的组件来解决此类问题是正确的方法/模式吗？

Answer 1

您可以让父级将一个函数向下传递给按钮onClick()-function中的页脚。然后，您还将该函数传递给主体，并使表单保存相关信息。

该按钮不需要知道它正在保存什么，只需要知道它被单击了。