Question

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

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

如何做出这样的反应呢？我正在考虑为每个模板创建一个组件，它看起来像这样：

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多个模板（带有在途中还有更多。）

我怎样才能＆＃34;获取＆＃34;来自服务器的这些组件？我发现大多数资源提到两次调用React.renderComponent，一次在服务器上，在浏览器中。这是否意味着我必须在我的客户端javascript中包含每个模板？我可以通过AJAX发送组件吗？

我对此仍然很陌生，并会感谢任何可以帮助我思考的资源。

Answer 1

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

当您从服务器获取模板时，您可以将文档设置为显示＆＃34; loading＆＃34;模板，下载新模板后，您可以将其切换到该模板。

只要合并的，缩小的，压缩的大小低于~200kb，您可能不必担心，并且可以在您的初始有效负载中包含所有这些。

考虑到当您异步执行模板时，更改模板的意图与用户看到模板的时间之间存在延迟。如果它全部提前，模板切换就会立即进行。

ReactJS模板组件

1 个答案: