Question

我有一个＆＃34;容器＆＃34;反应含有其他反应成分的成分。我想保存＆＃34;容器＆＃34;组件（及其子组件）在mongodb中然后从那里获取它。 最佳做法是什么？（用户将在容器中添加和编辑这些组件）

Answer 1

有很多方法可以实现这一目标。根据您的描述，我会想象制作一个“描述”组件状态的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>

Answer 2

您可以查看：react-pstate，然后找出一种将您的网络服务用作存储空间的方法......

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

保存React组件

2 个答案: