Javascript 反应相似部件设计

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

常量页=（正文）=>{
{body}
}
常量头=（）=>{
返回头；
}
常量页脚=（）=>{
返回(
拯救
取消
);
}
常量body1=（）=>{
//多个输入、选择器
}
常量body2=（）=>{
//多个输入、选择器
}

---

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

您可以让父级将函数传递给放置在按钮onClick（）函数中的页脚。然后，您还将该函数传递给body，并使表单保存相关信息

---

按钮不需要知道它正在保存什么，只需要单击它即可。

这是可能的，但要实现这一点，我认为您需要学习如何在每个组件中传递道具/数据。

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