Question

反应

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>

Answer 1

您可以将HTML元素数组发送到react，对于下面的代码，您只需在render方法内创建嵌套对象。在这里，我们使用map并返回子项来遍历JSON

{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

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

1 个答案: