arrays - reactjs - 如何在react js中的div标签内一一呈现数组数据？

Question

我正在创建一个反应应用程序并从 API 调用中获取所有数据。我已将数据设置为一个数组，需要在 div 标签内一一显示。

我的数据集如下所示。

qtemp3: [
  {
    idappcontent: "Sign_01",
    content:
      '<img id="vClub_logo" src="#FOLDERPATH#v-club.png" style="width:600px;height: 150px;">',
  },
  {
    idappcontent: "Sign_02",
    content:
      "<div style=\"color: #0D0D0D;\"> When you give us your name,<br /> e-mail address and the dates of your birthday and anniversary, we'll add you to our exclusive email database. You'll then be entitled to receive valuable offers each month and on those special occasions.</div>",
  },
  {
    idappcontent: "Sign_03",
    content:
      ' <div style="text-align:center"> <label for="firstName">First Name</label></div><div style="margin-top: 3%;"><input id="fname" name="firstName" onkeyup="FirstnameValidation()" style="font-family: trajanPro;width:100%;text-transform: capitalize;border-color: rgb(224, 94, 7);" /> </div>',
  },
  {
    idappcontent: "Sign_04",
    content:
      '<div style="text-align:center"> <label for="lname">Last Name</label> </div><div style="margin-top: 3%;"><input id="lname" name="lname" style="font-family: trajanPro;width:100%;text-transform: capitalize;" /></div>',
  },
  {
    idappcontent: "Sign_05",
    content:
      ' <div style="text-align:center"><label for="email">Email Address</label></div><div style="margin-top: 1%;"><input id="email" type="email" name="email" onkeyup="emailvalidation()"  style="width:100%;border-color: rgb(224, 94, 7);" /></div>',
  },
  {
    idappcontent: "Sign_06",
    content:
      '<div id="birthdayHeader"><label>Birthday</label></div><div style="display: inline-table; margin-top: 8px; width: 100%;"><div style="display: inline-block; width: 50%; text-align: right"><label for="birthdayMonth">(Month)</label><input id="birthdayMonth" type="number" min="0" max="12" onkeyup = "birthdayMonthValidate()"  name="birthdayMonth" style="width:45px"></div><div style="display:inline-block;width:50%;text-align:left"><input id="birthdayDay" type="number" min="0" max="31" name="birthdayDay" onkeyup = "birthdayValidate()" style="width:45px"><label for="birthdayDay">(Day)</label></div></div></div>',
  },
],

现在我需要在 div 标签内渲染这个数组。

我的 div 标签代码如下所示。

<div class="Header-banner" style="text-align: center;" id="Sign_01"></div>
<div id="Sign_02"></div>
<div id="signUpfrm" style="width:100%">
    <div style="text-align:center">
        <div style="display:inline-table;width:100%">
            <div id="Sign_03" style="display: inline-block; text-align: right; width: 32%;margin-right: 1px;"></div>
            <div id="Sign_04" style="display: inline-block; text-align: left; width: 32%; margin-left: 2px;"></div>
        </div>
        <div id="Sign_05" style="margin-top: 2%; width: 65%; display: inline-table;"></div>

        <div id="Sign_09" class="MainWrapper" style="margin-top: 2%; width: 65%; display: inline-table;"></div>
        <div style="display:inline-flex; width: 89%;">
            <div id="Sign_07" class="MainWrapper" style="width:50%"></div>
            <div id="Sign_08" class="Mainwrapper" style="width: 50%; margin-top: 8px;"></div>
        </div>
        <div style="height: 28px; margin-top: 4%">
            <div id="Sign_06" class="MainWrapper" style="margin-top: 4%;"></div>
        </div>

    </div>
</div>

如何在这个 div 标签内一一显示数组数据？

标签： arraysreactjs

Answer 1

你应该使用地图

qtemp3.map(item=>{
document.getElementById(item.idappcontent).innerHTML=item.content
});

这是示例：

const qtemp3= [
  {
    idappcontent: "Sign_01",
    content:
      '<img id="vClub_logo" src="#FOLDERPATH#v-club.png" style="width:600px;height: 150px;">',
  },
  {
    idappcontent: "Sign_02",
    content:
      "<div style=\"color: #0D0D0D;\"> When you give us your name,<br /> e-mail address and the dates of your birthday and anniversary, we'll add you to our exclusive email database. You'll then be entitled to receive valuable offers each month and on those special occasions.</div>",
  },
  {
    idappcontent: "Sign_03",
    content:
      ' <div style="text-align:center"> <label for="firstName">First Name</label></div><div style="margin-top: 3%;"><input id="fname" name="firstName" onkeyup="FirstnameValidation()" style="font-family: trajanPro;width:100%;text-transform: capitalize;border-color: rgb(224, 94, 7);" /> </div>',
  },
  {
    idappcontent: "Sign_04",
    content:
      '<div style="text-align:center"> <label for="lname">Last Name</label> </div><div style="margin-top: 3%;"><input id="lname" name="lname" style="font-family: trajanPro;width:100%;text-transform: capitalize;" /></div>',
  },
  {
    idappcontent: "Sign_05",
    content:
      ' <div style="text-align:center"><label for="email">Email Address</label></div><div style="margin-top: 1%;"><input id="email" type="email" name="email" onkeyup="emailvalidation()"  style="width:100%;border-color: rgb(224, 94, 7);" /></div>',
  },
  {
    idappcontent: "Sign_06",
    content:
      '<div id="birthdayHeader"><label>Birthday</label></div><div style="display: inline-table; margin-top: 8px; width: 100%;"><div style="display: inline-block; width: 50%; text-align: right"><label for="birthdayMonth">(Month)</label><input id="birthdayMonth" type="number" min="0" max="12" onkeyup = "birthdayMonthValidate()"  name="birthdayMonth" style="width:45px"></div><div style="display:inline-block;width:50%;text-align:left"><input id="birthdayDay" type="number" min="0" max="31" name="birthdayDay" onkeyup = "birthdayValidate()" style="width:45px"><label for="birthdayDay">(Day)</label></div></div></div>',
  },
];

qtemp3.map(item=>{
document.getElementById(item.idappcontent).innerHTML=item.content
});

<div class="Header-banner" style="text-align: center;" id="Sign_01"></div>
<div id="Sign_02"></div>
<div id="signUpfrm" style="width:100%">
    <div style="text-align:center">
        <div style="display:inline-table;width:100%">
            <div id="Sign_03" style="display: inline-block; text-align: right; width: 32%;margin-right: 1px;"></div>
            <div id="Sign_04" style="display: inline-block; text-align: left; width: 32%; margin-left: 2px;"></div>
        </div>
        <div id="Sign_05" style="margin-top: 2%; width: 65%; display: inline-table;"></div>

        <div id="Sign_09" class="MainWrapper" style="margin-top: 2%; width: 65%; display: inline-table;"></div>
        <div style="display:inline-flex; width: 89%;">
            <div id="Sign_07" class="MainWrapper" style="width:50%"></div>
            <div id="Sign_08" class="Mainwrapper" style="width: 50%; margin-top: 8px;"></div>
        </div>
        <div style="height: 28px; margin-top: 4%">
            <div id="Sign_06" class="MainWrapper" style="margin-top: 4%;"></div>
        </div>

    </div>
</div>

这是反应 js 示例：

反应样本