Как сделать ссылки в цикле?

Question

[ayapergenov]

Нужно сделать ссылки в цикле React компонента. Подскажите правильный синтаксис, пожалуйста.

<CardImg top width="100%" src={`/${item.picture}`} alt="{item.imgalt}" />

Answer 1

[Антон Спирин]

{items.map(item => (
  <CardImg key={item.picture} top width="100%" src={item.picture} alt={item.imgalt} />
))}

Lists and keys

Comments

[ayapergenov]

Антон, не помогает.
Привожу весь синтаксис.

import React from 'react';
import { Card, CardBody, Button, CardTitle, CardGroup, CardImg } from 'reactstrap';
import { Link } from 'react-router-dom';
import "./Googs.scss";
import items from './Googsprops';

const Item = (item) => {
  return (
      <Card className="card-block">
        <CardImg top width="100%" src={item.picture} alt={item.imgalt} />
        <CardBody>
          <CardTitle>{item.heading}</CardTitle>
          <Button className="card-button">
          <Link to={item.anchor}>Смотреть</Link>
          </Button>
        </CardBody>
      </Card>
  )
}

class ItemList extends React.Component {
  render() {
      const itemElements = this.props.items.map(item =>
        <Item item = {item}/>
      )
      return (
        <>
          {itemElements}
        </>
      )
  }
}

class Googs extends React.Component {
  render() {
    return (
      <CardGroup>
          <ItemList items = {items}/>
      </CardGroup>
    );
  }
}

export default Googs;

[Антон Спирин]

ayapergenov, а что именно не получается? У вас items это массив? Какие ошибки в консоли?
Нужно больше подробностей.

[ayapergenov]

Антон Спирин, Антон, с проблемой разобрался заменив const Item = (item) => { на function Item({ item }) {
Все работает. Теперь проблема с выводом внешних ссылок в цикле. Сейчас у меня получаются такие ссылки
localhost:3000/http://mysite.ru

[Антон Спирин]

ayapergenov,
1. Нет разницы const или function. Ошибка была в том, что правильно обращаться к свойству компонента надо так:

const Item = (props) => {
   // props.item

или деструктуировав аргументы:
const Item = ({ item }) => {

2. Компонент Link используют не для внешних ссылок, а для ссылок клиентского роутера.

[ayapergenov]

Антон Спирин, Насчет 1 уже понял до вашего ответа. По 2, перевел на тэг а. Все получилось.
Остался последний вопрос с ссылками на картинки в цикле. Положил изображения в папку static и хочу вывести в том же цикле. Ссылка корректно отображается, но изображение не появляется. Вроде простое дело, а изображений нет.

[Антон Спирин]

ayapergenov, вам надо либо делать явный импорт картинок в коде:
import image from './image.png';
либо самостоятельно размещать файлы изображений в static директории сервера и использовать простые строки

[ayapergenov]

Антон Спирин, Так я уже делал для одиночных ссылок. А тут цикл. Надо чтобы он тащил их по очереди.

[Антон Спирин]

ayapergenov, когда вы подключаете изображение через import или require его перехватывает file-loader, файл копируется в dist директорию, а путь в сборке меняется на путь относительный путь из статической директории. Если же вы используете для путей строки без import или require, то копирование файлов и валидность url ресурсов из статической директории ложится на ваши плечи.
Так же советую научиться пользоваться панелью разработчика. На той же вкладке network вы всегда можете посмотреть ошибки загрузки файлов.

Answer 2

[xxx44552]

<CardImg top width="100%" src={require(`${item.picture}`)} alt="{item.imgalt}" />