如何通过嵌套的 JSON 对象创建动态内容循环？

ARL代码

反应

getSection (object) {

    let sectionContent = [],
        sectionContainers = [],
        i = 0;

    for(let sectionTitles in object){

        sectionContainers.push(<div className={"section " + sectionTitles}></div>);

        for(let sectionTitle in object[sectionTitles]) {

            sectionContainers.push(<div className={"section " + sectionTitle} key={sectionTitle + "-" + i.toString()}>{object[sectionTitles][sectionTitle]}</div>);
            i++;

        }
    }

JSON

 const sections = 
    {"resume": {
        "name": "[HEADLINE_TEXT]",
        "job-title": "[JOB_TITLE]",
        "timeframe": "[TIME_FRAME]",
        "company-name": "[COMPANY_NAME]",
        "job-description": "[JOB_DESCRIPTION]",
        "job-tech": "[JOB_TECH]"
    },
    "projects": {
        "name": "[HEADLINE_TEXT]",
        "job-title": "[JOB_TITLE]",
        "timeframe": "[TIME_FRAME]",
        "company-name": "[COMPANY_NAME]",
        "job-description": "[JOB_DESCRIPTION]",
        "job-tech": "[JOB_TECH]"
    }};

试图遍历这个 JSON 片段，无法弄清楚我在这里做错了什么，我知道第一个函数getSection()有一个关闭的DIV标签，但这是因为如果我不关闭元素，React 就会崩溃。我有一点 PHP 背景，所以我认为它的工作原理是一样的，但显然我错了。目标是这样的

HTML

<div class=section__sectionTitle>
  <div class=section_element1></div>
  <div class=section__element2></div>
</div>

如果

您可以将一组 HTML 元素发送到react，对于下面的代码，您只需在 render 方法中创建嵌套对象即可。在这里，我们遍历JSONusing map 并返回 children

{Object.keys(sections).map((container, i) => {
   return (
    <div key={i}>
      {container}
       {Object.keys(sections[container]).map(content => {
         return <div> {sections[container][content]} </div>;
        })}
    </div>);
    })}

这是一个工作示例：CodeSandbox

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。