Question

我要一个建议：

我在React中编写了一个自定义表单组件。该组件以多种形式（许多不同形式）呈现表单输入。

constructor(props) {
  super(props);
  this.labelClasses = 'form-label animated-label';
  this.inputClasses = 'form-input animated-input';
  this.buttonClasses = 'vary-button';
  this.userInput = '';

  this.state = {
    touched: false,  
    isActive: false,
    amount: '', // all these will be passed down using props or from redux store
    hasError: false,
    required: true,
    inputType: 'number',
    name: 'Field',
    allowVariation: true,
    step: 10,
    importValue: false
  };
}

这些表单的区别在于它们应从用户接收的数据以及表单组件应如何/如何处理数据。

我可以获取以下表单组件的数据：（1）作为JSON文件提供-（然后使用fetch / axios获取数据）。（2）我可以编写实际对象并以不同形式导入（使用ES6导入）。

哪种方法会更好？

Answer 1

这取决于您想要什么。如果您使用JSON文件，则可以轻松进行数据更改。
如果将数据硬编码为对象，则每次要更改表单数据时都必须重新构建项目。

您没有提供有关项目或如何使用这些数据的大量信息，因此我无法真正给您适当的答案，但请您自问一下：
需要多久更改一次数据？
它应该改变吗？如果不应该更改，我认为进行硬编码就可以了。

同样，这完全取决于项目的类型以及您要实现的目标。这两个选项都有效。

Answer 2

这两种方式都取决于用例。

如果可以使用本地JSON或JS对象作为配置，而没有安全问题，则可以使用本地导入而不会出现问题。

如果您要导入的数据可以更改，并且应该在应用程序每次重新加载页面时进行检索，则或具有一些敏感信息，请考虑将其存储在后端服务器上并以任何方式进行检索（axios，AJAX，提取等）。

导出的Javascript对象与json文件

2 个答案: