Как добавить разделитель с помощью функции карты

Question

У меня есть константа

const tags = [
  {
    tagName: "tag1",
    tagLink: "#"
  },
  {
    tagName: "tag2",
    tagLink: "#"
  },
  {
    tagName: "tag3",
    tagLink: "#"
  }
];

Я хочу использовать функцию карты для визуализации тега привязки, а также я хочу разделитель | между тегами привязки.

Я пытался использоватьприсоединяйтесь, но тогда это не сработает.

Пожалуйста, проверьте скрипку

map using join
        <div style={style}>
          {tags
            .map((tag, i) => (
              <a href={tag.tagLink} alt="">
                {tag.tagName}
              </a>
            ))
            .join("|")}
        </div>

Производит: [object Object]|[object Object]|[object Object]

Answer 1

Не могли бы вы сделать "|"в функции карты?Как я уже писал в комментарии, используя join на JSX Object, приводим его к String, что приводит к [object Object].

{tags.map((tag, i) => (
    <a href={tag.tagLink} alt="">
        {tag.tagName} {i < tags.length - 1 ? "|" : ""}
    </a>
))}

Answer 2

Вы пытаетесь использовать элементы "join" массива элементов. Он будет внутренне типизировать элементы в строку, которая для любого объекта будет иметь вид [объектный объект]. Следовательно, вы получаете [object Object]|[object Object]|[object Object]

Примерно так будет работать:

{tags.map((tag, i) => {
    return <span>
       <a href={tag.tagLink} alt="">
          {tag.tagName}
       </a> {i < tags.length - 1 ? "|" : null}
    </span>           
})}

Answer 3

Я думаю, вы можете сделать ссылки, как предлагали другие

    const tags = [
  {
    tagName: "tag1",
    tagLink: "#first"
  },
  {
    tagName: "tag2",
    tagLink: "#second"
  },
  {
    tagName: "tag3",
    tagLink: "#third"
  }
];

const links = tags.map( tag => `<a href="${tag.tagLink}" class="divider" id="${tag.tagName}">${tag.tagLink}</a>` );

document.querySelector( 'body' ).innerHTML = links.join( '' );

и оставьте разделитель для CSS, вы можете назначить такой класс для вашего списка ссылок:

.divider{
 border-right: 1px solid black;
 padding-left: 10px;
 padding-right: 10px;
}

https://jsfiddle.net/xt09rpwm/

Answer 4

Вы можете просто сопоставить массив для создания тегов HTML. Разделитель может быть добавлен с помощью базового класса CSS.

const tags = [
  {
    tagName: "tag1",
    tagLink: "#first"
  },
  {
    tagName: "tag2",
    tagLink: "#second"
  },
  {
    tagName: "tag3",
    tagLink: "#third"
  }
];

const links = tags.map( tag => `<a href="${tag.tagLink}" id="${tag.tagName}">${tag.tagLink}</a>` );

document.querySelector( 'body' ).innerHTML = links.join( '' );

a + a {
  border-left: 1px solid black;
}