React 类似的组件设计答案

【问题标题】：React similar component designReact 类似的组件设计
【发布时间】：2019-08-11 22:55:54
【问题描述】：

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

<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中的信息或者如何页面知道它需要在正文中了解哪些信息）通过将正文提取为单独的组件，这是解决此类问题的正确方法/模式吗？

【问题讨论】：

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

标签： javascript reactjs

【解决方案1】：

您可以让父级将一个函数传递给放置在按钮 onClick() 函数中的页脚。然后你也将该函数传递给 body 并让表单保存相关信息。

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

【讨论】：