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

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

字符串
并且刚刚创建了自定义呈现方法来动态填充子对象。
编辑：我给孩子们添加了component。这使您可以确定要使用的组件。您需要创建一些东西，在呈现之前将此字符串转换为对实际组件的引用。示例如下：

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

const Header = p => (
  <header>{p.title}</header>
)
const Article = p => (
  <article>{p.title}</article>
)

const components = {
  Header,
  Article,
}

class App extends React.Component {
  componentWillMount () {
    fromMongo.children.map(d => (
      d.component = components[d.component]
    ))
  }
  render () {
    return (
      <div>
        {fromMongo.children.map(d => (
          <d.component title={d.title} />
        ))}
      </div>
    )
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
)

header {
 background-color: blue;
}

article {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'></div>

你可以看看：react-pstate然后找到一种方法来使用您的Web服务作为存储...
https://github.com/mgechev/react-pstate它当前使用localStorage...
另一种方法可以使用一些渲染...
看看这个
https://www.npmjs.com/package/react-test-renderer的

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

字符串