javascript - react 类似的组件设计

Question

假设我想创建一系列仅正文部分不同的页面，并且它们的页眉和页脚相似。 body 有各种形态。页脚是一些按钮，例如保存和取消按钮。 我正在考虑创建包含页眉和页脚的通用页面，并注入(inject)不同的正文，如下所示(伪代码):

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

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

Answer 1

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

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