React：从 html 字符串中的模板标签创建输入的方法

Question

好的，我们开始吧……

我有一个来自 API 响应的 HTML 字符串。它是构建电子邮件模板的 HTML。在返回的 HTML 中，有多个由双花括号 {{ }} 定义的模板标签实例。

第 1 部分

我想要实现的是创建一个函数来查找模板标签的所有实例，{{ tag }}。一旦找到，我想创建一个对象，所有键都是那些标签，去掉括号，可以保存到状态。

假设 html 包含这些标签

• {{ 标题 }}
• {{ sub_title }}
• {{标题}}
• {{ body_text }}

我们会创建一个看起来像这样的对象

{
    "title": " ",
    "sub_title" ; " ",
    "caption": " ",
    "body_text": " "
}

并将其保存到状态。例如 this.state.inputs

第 2 部分

在此对象处于状态后，我们可以创建多个输入，并将 name 属性设置为对象键。

<input name="title" />
<input name="sub_title" />
<input name="caption" />
<input name="body" />

第 3 部分

我知道如何处理，它将使用这些输入的值更新状态。没问题。

您认为解决此问题的最佳方法是什么？随时欢迎讨论。我想学习如何解决这些类型的问题。

Answer 1

如何创建一个函数并运行如下所示的 for 语句？ 以下是一个想法，而不是确切的操作代码。

let object1 = {
    "title": " ",
    "sub_title" ; " ",
    "caption": " ",
    "body_text": " "
}

for (const [key, value] of Object.entries(object1)) {
  <input className={key} props={value}/>
}