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

Posted 2023-02-22

【中文标题】显示动态 HTML 表单元素，其中包含具有订单配置的数组对象

【英文标题】：Display dynamic HTML form elements with array object having order configuration in it

【发布时间】：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 迭代，传递它将在某处工作。但似乎还有其他最好的方法..

【参考方案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 />
  );