Javascript 保存反应组件

我有一个“容器”react组件，其中包含其他react组件。我想在mongodb a中保存“容器”组件（及其子组件），然后从那里获取它最佳做法是什么？（用户将在容器中添加和编辑这些组件）

有多种方法可以实现这一点。根据您的描述，我可以想象制作一个“描述”组件状态的JSON。这种结构可以由您决定，但我做过类似的事情：

{
  title: 'Foo',
  children: [{
    title: 'c1',
    component: 'Header,
    description: 'c1 description'
  }, { 
    title: 'c2',
    component: 'Article,
    description: 'c2 description'
  }]
}

刚刚创建了自定义渲染方法来动态填充子对象

编辑：我向子项添加了

组件

。这允许您识别要使用的组件。在渲染之前，需要创建一些东西，将此字符串转换为对实际组件的引用。示例如下：

const fromMongo={
标题:"富",，
儿童：[{
标题：“c1”，
组件：“头”，
描述：“c1描述”
}, { 
标题：“c2”，
组成部分：'文章'，
描述：'c2描述'
}]
}
const Header=p=>(
{p.title}
)
const Article=p=>(
{p.title}
)
常数分量={
标题，
文章
}
类应用程序扩展了React.Component{
组件将安装（）{
fromMongo.children.map（d=>(
d、 组件=组件[d.组件]
))
}
渲染（）{
返回(
{fromMongo.children.map（d=>(
))}
)
}
}
ReactDOM.render(
,
document.getElementById（'app'）
)

标题{
背景颜色：蓝色；
}
文章{
背景颜色：橙色；
}

您可以看看：然后找到一种将web服务用作存储的方法

它当前使用本地存储

---

进一步的方法可能是使用一些渲染

看看这个：

const reactestrenderer=require（'react-test-renderer'）；
const renderer=ReactTestRenderer.create(
脸谱网
);
log（renderer.toJSON（））；
//{type:'a'，
//道具：{href:'https://www.facebook.com/' },
//儿童：['Facebook']}

wird request不确定为什么不能只保存元素的位置等。但是，可以（-ish）将组件呈现为json，然后将其转换回json。我不确定这有多成功。分享你的研究成果对每个人都有帮助。告诉我们您尝试了什么，以及为什么它不能满足您的需求。这表明你花了时间来帮助自己，它使我们避免重复显而易见的答案，最重要的是，它帮助你得到一个更具体和相关的答案！另请参见：您需要保存域状态或视图状态？@Purtary好吧，保存位置对我来说是不够的-容器中的元素可能包含文本、图像或其他元素。。。所以我需要一些东西，我可以保存到数据库中的东西，这将告诉我-“容器包含两个组件，第一个是“TestComponent”类型，大小10x10，颜色：'blue'，位置0，0，子项：。

第二个是图像类型，大小400x400。”@Hitmands View state因此容器应该包含属性（例如ContainerElements），哪个应该镜像我的组件的真实层次结构？这不会反映dom属性（类、样式表、ecc…）我给了它一个快速视图。它包含一些有用的代码。现在它看起来像是“唯一”保存状态，但我还需要保存容器类型的子对象（或者我错过了什么？）你有没有检查react渲染器如何创建快照？对于状态，我应该创建一个新函数？我想容器应该包含其子容器的状态，所以我在那里写函数“getState”（或类似的东西）？也许吧！老实说，你的是一个大挑战…需要几个小时才能弄清楚。。。

const ReactTestRenderer = require('react-test-renderer');

const renderer = ReactTestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(renderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }