如何在React.js中将数组数据逐一渲染到对应div标签中？

根据你的需求，这里提供两种可行的方式，优先推荐符合React设计理念的方案，也会给出直接操作DOM的备选方案（适合快速适配现有代码，但不推荐长期使用）。

方案一：使用React的JSX渲染（推荐） #

React的核心是通过状态和JSX管理UI，直接操作DOM会绕过虚拟DOM机制，容易导致状态不一致。我们可以先把qtemp3数组转换成键值对映射，再在JSX对应位置插入内容：

步骤1：构建内容映射 #

先把数组转为以idappcontent为键的对象，方便快速查找对应内容：

const qtemp3 = [
  // 你的数组数据...
];

// 将数组转为键值对映射
const contentMap = qtemp3.reduce((acc, item) => {
  acc[item.idappcontent] = item.content;
  return acc;
}, {});

步骤2：在JSX中渲染内容 #

把你提供的目标div结构转换成JSX，每个对应id的div通过dangerouslySetInnerHTML插入HTML内容（注意：仅当你完全信任这些HTML内容时使用，避免XSS风险）：

function SignUpComponent() {
  return (
    <div>
      <div 
        className="Header-banner" 
        style={{ textAlign: "center" }} 
        id="Sign_01"
        dangerouslySetInnerHTML={{ __html: contentMap["Sign_01"] || "" }}
      ></div>
      <div 
        id="Sign_02"
        dangerouslySetInnerHTML={{ __html: contentMap["Sign_02"] || "" }}
      ></div>
      <div id="signUpfrm" style={{ width: "100%" }}>
        <div style={{ textAlign: "center" }}>
          <div style={{ display: "inline-table", width: "100%" }}>
            <div 
              id="Sign_03" 
              style={{ display: "inline-block", textAlign: "right", width: "32%", marginRight: "1px" }}
              dangerouslySetInnerHTML={{ __html: contentMap["Sign_03"] || "" }}
            ></div>
            <div 
              id="Sign_04" 
              style={{ display: "inline-block", textAlign: "left", width: "32%", marginLeft: "2px" }}
              dangerouslySetInnerHTML={{ __html: contentMap["Sign_04"] || "" }}
            ></div>
          </div>
          <div 
            id="Sign_05" 
            style={{ marginTop: "2%", width: "65%", display: "inline-table" }}
            dangerouslySetInnerHTML={{ __html: contentMap["Sign_05"] || "" }}
          ></div>
          <div id="Sign_09" className="MainWrapper" style={{ marginTop: "2%", width: "65%", display: "inline-table" }}></div>
          <div style={{ display: "inline-flex", width: "89%" }}>
            <div id="Sign_07" className="MainWrapper" style={{ width: "50%" }}></div>
            <div id="Sign_08" className="Mainwrapper" style={{ width: "50%", marginTop: "8px" }}></div>
          </div>
          <div style={{ height: "28px", marginTop: "4%" }}>
            <div 
              id="Sign_06" 
              className="MainWrapper" 
              style={{ marginTop: "4%" }}
              dangerouslySetInnerHTML={{ __html: contentMap["Sign_06"] || "" }}
            ></div>
          </div>
        </div>
      </div>
    </div>
  );
}

注意事项 #

• dangerouslySetInnerHTML的命名带有警示性，目的是提醒你注意XSS风险，确保API返回的内容是安全可信的。
• 你内容中的原生onkeyup事件（比如FirstnameValidation()）需要在全局作用域或组件中定义，否则会报错。如果想完全React化，建议改成React的onKeyUp事件处理方式。

方案二：直接操作DOM（不推荐） #

如果需要快速适配现有代码，可以在组件挂载后遍历数组，直接找到对应ID的元素插入内容：

import { useEffect } from 'react';

function SignUpComponent() {
  useEffect(() => {
    qtemp3.forEach(item => {
      const element = document.getElementById(item.idappcontent);
      if (element) {
        element.innerHTML = item.content;
      }
    });
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return (
    // 你的原始div结构转换成JSX
    <div>
      <div className="Header-banner" style={{ textAlign: "center" }} id="Sign_01"></div>
      <div id="Sign_02"></div>
      <div id="signUpfrm" style={{ width: "100%" }}>
        <div style={{ textAlign: "center" }}>
          <div style={{ display: "inline-table", width: "100%" }}>
            <div id="Sign_03" style={{ display: "inline-block", textAlign: "right", width: "32%", marginRight: "1px" }}></div>
            <div id="Sign_04" style={{ display: "inline-block", textAlign: "left", width: "32%", marginLeft: "2px" }}></div>
          </div>
          <div id="Sign_05" style={{ marginTop: "2%", width: "65%", display: "inline-table" }}></div>
          <div id="Sign_09" className="MainWrapper" style={{ marginTop: "2%", width: "65%", display: "inline-table" }}></div>
          <div style={{ display: "inline-flex", width: "89%" }}>
            <div id="Sign_07" className="MainWrapper" style={{ width: "50%" }}></div>
            <div id="Sign_08" className="Mainwrapper" style={{ width: "50%", marginTop: "8px" }}></div>
          </div>
          <div style={{ height: "28px", marginTop: "4%" }}>
            <div id="Sign_06" className="MainWrapper" style={{ marginTop: "4%" }}></div>
          </div>
        </div>
      </div>
    </div>
  );
}

为什么不推荐？ #

这种方式绕过了React的虚拟DOM管理，当组件重新渲染时，直接修改的DOM内容可能被React覆盖，导致UI不一致，同时不符合React的设计模式，不利于长期维护和扩展。

内容的提问来源于stack exchange，提问作者Sidath