Reactjs中如何同时遍历list、link两个列表并绑定对应超链接

你可以通过map遍历的第二个索引参数，匹配list和link数组同下标的值，再做条件判断即可实现需求，以下是修改后的可运行代码：

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((colProps) => {
        // key改用唯一的category属性，更符合React规范
        return <FooCol key={colProps.category} colProps={colProps} />
     })}
</foot>


const FooCol = ({colProps}) => {
// 解构赋值简化取值，link默认设为空数组避免无link属性时取值报错
const { list, link = [] } = colProps;

return (
    <Col>
        <ul>
            {list.map((item, index) => {
                const targetUrl = link[index]
                return (
                  <li key={item}>
                    {/* 存在对应链接时渲染带跳转的a标签，否则直接渲染文本避免空链接 */}
                    {targetUrl ? <a href={targetUrl}>{item}</a> : item}
                  </li>
                )                
            })}
        </ul>
    </Col>
)
}

如果你的业务场景需要统一保留a标签结构，不需要区分是否有跳转链接，可以把li内的逻辑简化为：

<a href={link[index] || ''}>{item}</a>

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