遍历 Reactjs 中的 2 个列表

Question

我是 React 新手，我正在尝试同时迭代 2 个列表 'list' 和 'link' 并在列中显示 'list' 并在 hyperlink 中显示地址，如果 'link' 可用。目前我的代码在列中显示列表，但我不确定如何 link 相应列表项的 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

根据您的代码示例，我假设 links 和它们的标签（列表）在相应的索引上。因此，您可以按索引映射标签数组和 link 数组索引。

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>
)
}

最好找到一种方法来接收预先在服务器端组合在一起的这些信息。

遍历 Reactjs 中的 2 个列表

Iterate through 2 lists in Reactjs

reactjs

react-props