javascript - 保存 React 组件

Question

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

Answer 1

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

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

并且刚刚创建了自定义渲染方法来动态填充子项。

编辑:我向 child 添加了 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>