显示动态 HTML 表单元素，其中包含具有订单配置的数组对象答案

【问题标题】：Display dynamic HTML form elements with array object having order configuration in it显示动态 HTML 表单元素，其中包含具有订单配置的数组对象
【发布时间】：2021-02-08 10:01:30
【问题描述】：

我正在尝试以动态方式生成 HTML 元素，其中 DOM 元素的顺序将由对象 json 配置显示。

我有json对象

[{"orderDisplay" : 1, elementName: 'username'},
{"orderDisplay" : 2, elementName: 'password'},
{"orderDisplay" : 3, elementName: 'email'} ]

我有静态 DOM 元素

HTML

<input type='username' value='' />
<input type='password' value='' />
<input type='email' value='' />

通过displayOrder，HTML元素将被调整。

这里有什么最好的方法，请评论。

谢谢！

【问题讨论】：

在原始数组中按 orderDisplay 排序，然后迭代 json 以构建输入字段
好的，@RajaJaganathan 明白了你的意思，因为我有静态 HTML 元素，如果我将它分配给任何变量并使用它动态 json 迭代，传递它将在某处工作。但似乎还有其他最好的方法..

标签： html json reactjs jsx

【解决方案1】：

列表数据结构已经在linear order中。

所以你基本上可以为每个输入元素设置一个controlled component 并构造元素列表。

/* Controlled Components */
function Username(props) {}
function Password(props) {}
function Email(props) {}

/* Parent Component (i.e. form) */
function Form(props) {
  const { elements } = props;
  return elements.map((e) => React.createElement(e))
}

function Page(props) {
  // TODO: generate elements list dynamically
  const elements = [Username, Password, Email];
  return (
    <Form elements={elements} />
  );
}

【讨论】：