基于JSON值不匹配的JSX条件呈现

我有以下建议：

{
    title: "Title 1",
    submenu: [
       {
           col: 1,
           title: "Sub Title 1",
        },
        {
          col: 1,
          title: "Sub Title 2",
        },
        {
          col: 2,
          title: "Sub Title 3",
        },
}

每次我都试图展示不同的内容

col

价值变化

以下是我到目前为止的情况：

{props.siteLinks.map((item, key) => (
    {item.title}
    {item.submenu.map((subitem, key) => {
        return (
            <div>
                <ul>
                    <li key={subitem.title}>
                        {subitem.col}
                        {subitem.title}
                    </li>
                </ul>
            </div>
         )
     })}
))}

因此，当值更改时（例如，从col:1更改为col:2），将插入一个新的div

预期的产出将是：

<div>
    <ul>
        <li>
            <div>Column 1</div>
            Sub title 1
            Sub title 2
            <div>Column 2</div>
            Sub title 3
        </li>
    </ul>
</div>

第1栏
副标题1
副标题2
第2栏
副标题3

听起来您想在col上创建一个groupby。有关groupby的更多信息，请查看此url

---

听起来你想在col上创建一个groupby。有关groupby的更多信息，请查看此url

鉴于此json：

{
    title: "Title 1",
    submenu: [
       {
           col: 1,
           title: "Sub Title 1",
        },
        {
          col: 1,
          title: "Sub Title 2",
        },
        {
          col: 2,
          title: "Sub Title 3",
        },
} 

产生

distinctVals =
    {
        1: [
            {
                col: 1,
                title: "Sub Title 1",
            },
            {
                col: 1,
                title: "Sub Title 2",
            }
        ],
        2: [
            {
                col: 1,
                title: "Sub Title 1",
            }
        ]
    }

现在您可以使用它来映射列：

props.siteLinks.map((item, key) => {
    return (
        <div>
            {
                distinctVals.map((val, key) => {
                    return (
                        <div>
                            <ul>
                                {val.map((v, ind) => {
                                    <li key={ind}>
                                        {val.col}
                                        {val.title}
                                    </li>
                                })
                                }
                            </ul>
                        </div>
                    )
                })
            }
        </div>
    );
});

props.siteLinks.map（（项目，键）=>{
返回(
{
distinctVals.map（（val，key）=>{
返回(

{val.map（（v，ind）=>{

{val.col}
{val.title}

})
}

)
})
}
);
});

给定此json：

{
    title: "Title 1",
    submenu: [
       {
           col: 1,
           title: "Sub Title 1",
        },
        {
          col: 1,
          title: "Sub Title 2",
        },
        {
          col: 2,
          title: "Sub Title 3",
        },
} 

产生

distinctVals =
    {
        1: [
            {
                col: 1,
                title: "Sub Title 1",
            },
            {
                col: 1,
                title: "Sub Title 2",
            }
        ],
        2: [
            {
                col: 1,
                title: "Sub Title 1",
            }
        ]
    }

现在您可以使用它来映射列：

props.siteLinks.map((item, key) => {
    return (
        <div>
            {
                distinctVals.map((val, key) => {
                    return (
                        <div>
                            <ul>
                                {val.map((v, ind) => {
                                    <li key={ind}>
                                        {val.col}
                                        {val.title}
                                    </li>
                                })
                                }
                            </ul>
                        </div>
                    )
                })
            }
        </div>
    );
});

props.siteLinks.map（（项目，键）=>{
返回(
{
distinctVals.map（（val，key）=>{
返回(

{val.map（（v，ind）=>{

{val.col}
{val.title}

})
}

)
})
}
);
});

在阅读了下面的@Jon Jones post之后，我更新了我的答案。他使用array.prototype.reduce（）链接了一个groupBy方法，我提供了一个例子。我在阅读了下面的@Jon Jones post之后更新了我的答案。他使用array.prototype.reduce（）链接了一个groupBy方法，我提供了一个例子。