ReactJS зацикливание изображений с использованием ошибки foreach - PullRequest
Новая
       4

ReactJS зацикливание изображений с использованием ошибки foreach

0 голосов
/ 12 июня 2019

Я новичок в реагировании на JS, и в настоящее время я работаю над сайтом с более широкими возможностями интерфейса.

У меня есть раздел, в котором отображаются значки, и я хочу использовать цикл foreach во внешнем файле, поэтому мне не нужно продолжать импорт. Я пробовал этот foreach ниже: 

Icons.array.forEach((v) => {
                <Col span={v.colSpan}>
                  <div className="icon-container">
                      <img src={v.src} alt=""/>
                      <p className="icon-title">{v.label}</p>
                  </div>
                </Col>
              })

А вот мой внешний файл, где я получаю массив значков 

import React from 'react';


export const Icons = [
    {
        src: '../images/ICONS/Group 21@2x.png',
        label: 'Frontend',
        colSpan: 6
    }
]

export default {
    Icons,
}

Я попробовал это и реагировал, сказал, что он не может скомпилировать, сказав, что он видел выражение 'no-susued-выражения'

UPDATE 

Here is my error:

      Line 12:  Parsing error: Unexpected token, expected ","

  10 |                 
  11 |                 
> 12 |               {Icons.map(icon => (
     |                     ^
  13 |                   <Col span={icon.colSpan}>
  14 |                     <div className="icon-container">
  15 |                       <img src={icon.src} alt="" />

Это мой код: 

import React from 'react';
import { Col, Row } from 'antd';
import '../App.css';
import "antd/dist/antd.css";
import { Icons } from './iconsarray'

export class Tech extends React.Component {
    render() {
            return (


              {Icons.map(icon => (
                  <Col span={icon.colSpan}>
                    <div className="icon-container">
                      <img src={icon.src} alt="" />
                      <p className="icon-title">{icon.label}</p>
                    </div>
                  </Col>
                ))}

            );
    }
}

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Это потому, что ваш метод рендеринга ожидает родительский элемент, но в вашем методе рендеринга нет родительского элемента.

Замените ваш метод рендеринга родительским элементом.Например, я добавил div в качестве родителя. 

 render() {
   return (
    <div>
      {Icons.map(icon => (
         <Col span={icon.colSpan}>
            <div className="icon-container">
              <img src={icon.src} alt="" />
              <p className="icon-title">{icon.label}</p>
            </div>
         </Col>
       ))}
    </div>
    );
  }
1 голос
/ 12 июня 2019

Чтобы получить / отобразить каждый элемент, вам нужно использовать Map ES6 концепцию, которая возвращает элемент, а forEach ничего не возвращает.

   {Icons.map(icon => (
       <Col span={icon.colSpan}>
          <div className="icon-container">
              <img src={icon.src} alt=""/>
              <p className="icon-title">{icon.label}</p>
          </div>
       </Col>
   ))}
...