ReactJS 模板组件

Question

我正在开发一个基本的文档编辑应用程序。

每个文档都有一个数据模型，它是一个普通的 JavaScript 对象。我希望每个文档都有许多可能的模板，其中模板是服务器上的 HTML 表单。当用户切换文档模板时，将从服务器检索模板 HTML，并将当前模型值填充到输入中。

如何在 React 中做这样的事情？我正在考虑为每个模板创建一个组件，如下所示:

var TemplateOne = React.createComponent({
  getDefaultProps: function(){
    return {
        margin: "0.5in",
        layout: "portrait"
    };
  },

  render: function(){
    return (
      <Page margin={this.props.margin} layout={this.props.layout}> 
        <input name="foo" value={this.props.data.foo} onChange={this.prop.updateModel} />
        <input name="bar" value={this.props.data.bar} onChange={this.prop.updateModel} />
        <input name="car" value={this.props.data.car} onChange={this.prop.updateModel} />
      </Page>
    );
  }
});


var TemplateTwo = React.createComponent({
  getDefaultProps: function(){
    return {
      margin: "1in",
      layout: "landscape"
    };
  },

  render: function(){
    return (
      <Page margin={this.props.margin} layout={this.props.layout}> 
        <input name="foo" value={this.props.data.foo} onChange={this.prop.updateModel} />
        <input name="zap" value={this.props.data.zap} onChange={this.prop.updateModel} />
      </Page>
    );
  }
});

我还会有一个 Document 组件，它以 data 属性的形式传递其模型状态，以及潜在的 margin 或 layout 属性到 Template 组件。 updateModel 属性也会从 Document 组件传递到模板，并更新 Document 模型的状态。

理想情况下，每个 Template 组件都位于一个单独的文件中，因为由于非常具体的表单要求，每个模板的标记可能有数百行长，而我有 20 多行模板(还有更多)。

我如何从服务器“获取”这些组件？我发现的大多数资源都提到调用 React.renderComponent 两次，一次在服务器上，一次在浏览器中。这是否意味着我必须将每个模板包含在我的客户端 JavaScript 中？我可以通过 AJAX 发送组件本身吗？

我对此还很陌生，并且非常感谢任何可以帮助我思考这个问题的资源。

Answer 1

任何异步获取 JavaScript 的解决方案都适用于此。这包括 require.js、webpack 和其他加载器。

当您从服务器获取模板时，您可以将文档设置为显示“正在加载”模板，并且当下载新模板时，您可以将其切换到该模板。

只要组合、缩小、gzip 压缩的大小低于 ~200kb，您可能不需要担心，只需将所有这些包含在您的初始有效负载中即可。

请考虑，当您异步执行模板时，更改模板的意图与用户看到模板的时间之间存在延迟。如果一切都是预先进行的，模板切换就会变得即时。