Javascript 将样式/颜色应用于第一个元素

让下面的代码在React中显示面包屑。我只想为第一个元素添加一些样式或链接。如何做到这一点

const routes = [
  { path: '/', breadcrumb: 'Dashboard'},
  { path: '/patients', breadcrumb: 'Patients' },
  { path: '/add', breadcrumb: 'Creation' },
];

const Breadcrumbs = withBreadcrumbs(routes, { disableDefaults: true })(({ breadcrumbs }) => (
  <React.Fragment>
    {breadcrumbs.map(({ breadcrumb }, index) => {
      return (
         <span>
          {index !== 0 && <span> •</span>}  {breadcrumb}
        </span> 
      );
    })}
  </React.Fragment>
));

const路由=[
{path:'/'，breadcrumb:'Dashboard'}，
{路径：'/patients'，面包屑：'patients'}，
{path:'/add'，breadcrumb:'Creation'}，
];
const Breadcrumbs=withBreadcrumbs（路由，{disableDefaults:true}）（（{Breadcrumbs}）=>(
{breadcrumbs.map（{breadcrumb}，index）=>{
返回(
{index！==0&•}{breadcrumb}
);
})}
));

对于此类需求，我们应该始终尽最大努力将

if语句

转移到循环之外

const Breadcrumbs = withBreadcrumbs(routes, { disableDefaults: true })(({ breadcrumbs }) => (
  <React.Fragment>
    <span className='special-style'>{breadcrumbs[0]}</span> // first element and applys special css classes or styles
    {breadcrumbs.slice(1).map(({ breadcrumb }, index) => {  // loop the rest of elements=breadcrumbs.slice(1)
      return (
         <span key={index}>
          {<span> •</span>}  {breadcrumb}
        </span> 
      );
    })}
  </React.Fragment>
))

const Breadcrumbs=withBreadcrumbs（路由，{disableDefaults:true}）（（{Breadcrumbs}）=>(
{breadcrumbs[0]}//第一个元素并应用特殊的css类或样式
{breadcrumbs.slice（1）.map（{breadcrumb}，index）=>{//循环其余元素=breadcrumbs.slice（1）
返回(
{•}{面包屑}
);
})}
))

似乎最简单的事情是CSS规则，比如将其应用于index==0？从逻辑上讲，我理解你的意思。尽管我现在有这个错误

Uncaught错误：对象作为React子对象无效（找到：具有键{match，location，key，breadcrumb}的对象）。如果要呈现子对象集合，请改用数组

let

array.map

returns

Yes我缺少那个。谢谢