Блог

Я пытаюсь отобразить массив, в котором каждый элемент становится отдельной ссылкой, разделенной символом больше, чем >

Таким образом, массив [hello, world, foo, bar] становится

привет > Мир > фу > бар

Как я могу правильно сделать это в JSX? Я пытаюсь что-то вроде

 const path = ["Hello", "World", "Foo", "Bar"]

return (
    <div className='breadcrumbs'>
    {props.user ? 
        path.map((entry) => <span><Link>{entry}</Link>amp;></span>) : <></> }
    </div>
);
 

С помощью этого CSS:

 .breadcrumbs {
    display: flex;
    flex-direction: row;
}
 

И все же я получаю такой результат:

Как я могу все держать в узде?

Вероятно, это происходит потому, что ваш Link компонент отображает a block level element . Следовательно, заставляя > перейти к следующей строке.

Вы можете присвоить своему внутреннему пространству имя класса, а затем присвоить ему свойство display:flex . Это гарантирует, что он останется в ряду.

Также не забудьте придать своим элементам надлежащий уникальный key вид при прорисовке map .

 const path = ["Hello", "World", "Foo", "Bar"]

return (
    <div className='breadcrumbs'>
    {props.user ? 
        path.map((entry,index) => <span key={`breadcrumb-item-${index}`} className="breadcrumb-item"><Link>{entry}</Link>amp;></span>) : <></> }
    </div>
);

 

 .breadcrumb-item{
 display:flex;
 gap:2px;
 align-items:center;
}