时间戳

首页 > 解决方案 > 如何在reactjs中的map foreach中获取最后一个数据并设置颜色

javascript - 如何在reactjs中的map foreach中获取最后一个数据并设置颜色

问题描述

const pages = ["main", "about", "contact"];
const pagesList = pages.map((page) => <li>{page}</li>);

结果：

<ul>
<li>Main</li>
<li>About</li>
<li>Contact</li>
</ul>

我想将“a”标签设置为“Main and About”“li”。我怎样才能做到这一点？谢谢你的帮助

标签： javascriptreactjs

解决方案

感谢所有帮助过我的人。我解决了我 试图解决的问题：

<ul>
 <li>
  <a href='/test'>Home</a>
 </li>
 <li>
  <a href='/test'>test1</a>
 </li>
 <li>
  <a href='/test'>test2</a>
 </li>
 <li>
  <a href='/test'>test3</a>
 </li>
 <li>test4</li>
</ul>

每个 li 元素都有“a”元素，但最后一个 li 没有“a”元素我试图这样做。我的 pageHeader.js 组件是这样的

import React from "react";

import { Link } from "react-router-dom";

export const PageHeader = (props) => {
 const pages = props.pages;
 const pagesList = pages.map((page) => (
  <>
  {page == pages[pages.length - 1] ? (
    <li>{page}</li>
  ) : (
    <li>
      <Link to='test'>{page}</Link>
    </li>
  )}
</>
));
return (
 <>
  <div className='pageHeader'>
    <ul>{pagesList}</ul>
  </div>
</>
);
};

我找到了带有 javascript 长度表达式的最后一个数据；我在“if”“else”语句中添加了元素“a”。然后我在我的工作场所调用了这个组件，如下所示：

<PageHeader pages={["Home", "test1", "test2", "test3", "test4"]} />

推荐阅读