reactjs - 遍历 Reactjs 中的 2 个列表

Question

我是新手，我正在尝试同时迭代 2 个列表“列表”和“链接”，并在列中显示“列表”，如果“链接”可用，则超链接地址。目前我的代码在列中显示列表，但我不确定如何将 URL 链接到相应的列表项。

const columnProperties = [
{
    category: 'support',
    list: ['customer_service', 'faq']
},
{
    category: 'connect',
    list: ['facebook', 'instagram', 'twitter', 'youtube'],
    link: ['https://www.facebook.com/', 'https://www.instagram.com/','https://www.twitter.com/', 'https://www.youtube.com/']
}
]


<foot>
{columnProperties.map((props) => {
        return <FooCol key={props.list.toString()} props={props} />
     })}
</foot>


const FooCol = (props) => {

let list = props.props.list;
let category = props.props.category;
let link = props.props.link;

return (
    <Col>
        <ul>
            {list.map((item) => {
                return <li key={item}><a href="">{item}</a></li>                
            })}
        </ul>
    </Col>
)
}

Answer 1

从您的代码示例中，我假设它们的链接和标签（列表）位于相应的索引上。因此，您可以按索引映射标签数组和链接数组索引。

const FooCol = (props) => {

let list = props.props.list;
let category = props.props.category;
let links = props.props.link;

const linksWithLabels = links.map((link, index) => {
  return {
    link: link,
    label: list[index] ?? 'NO LABEL'
  }
});

return (
    <Col>
        <ul>
            {linksWithLabels.map((item) => {
                return <li key={item.label}><a href="">{item.link}</a></li>                
            })}
        </ul>
    </Col>
)
}

找到一种方法来接收已经在服务器端预先组合在一起的信息可能会更好。