Javascript React.js设计模式：使用*父*节点的多个字段保存可编辑文档

我正在客户端制作一个WYSIWYG编辑器，具有顶级的

NewProjectContainer

渲染功能，即：

render () {
    return (
        <div className="blog-post">
            <TitleContainer   user={this.props.user}/>
            <ContentContainer user={this.props.user}/>
        </div>
    )
}

render（）{
返回(
)
}

---

TitleContainer

和

ContentContainer

都可以编辑，应该保存到两个本地存储，卸载时保存到后端数据库。目前，每个组件都有自己的

saveLocal

和

saveDb

函数，这显然是一种反模式。理想情况下，子节点应将其内容移交给父节点

NewProjectContainer

，然后父节点应处理保存逻辑。React是否同意这是一种“理智”的做事方式？如果是这样的话，React中是否有语言结构（我是新来的）可以促进这一点？最简单的方法是将函数作为道具传递下去，但这听起来很奇怪，我错了吗？

您希望避免的一个陷阱是将您的状态分散到整个应用程序中

以下是我的建议：

• 首先，将整个应用程序状态放在

  NewProjectContainer

  中，并将函数和属性作为道具传递。理想情况下，

  TitleContainer

  和

  ContentContainer

  将是纯组件，这意味着它们没有自己的反应状态（

  this.state

  ）。然后，您将分离父容器中的所有API调用和业务逻辑，并仅将子容器用于显示

• 一旦你的应用程序超过3个组件，你可能想看看状态管理解决方案。最受欢迎的是和。网上有很多关于如何开始学习这些的教程。这些库将帮助您构建处理状态和副作用（API调用和其他异步操作）的方式