Как отобразить множество объектов Array и изображений в React?

Question

Вот этот ModuleCardData.js

  {
    name: 'Smart Attendance',
    summary: 'Keep parents updated with live Attendance and monthly reports',
    image: '{Attendance}',
  },
  {
    name: 'Parents Communication Module',
    summary:
      'Chat with parents anytime, anywhere. Disable chat when you are busy.',
    image: '{Communication}',
  },
  {
    name: 'Class Management',
    summary: 'Forget tons of paperwork and manage your institute completely.',
    image: '{Class}',
  },
  {
    name: 'Fee Records',
    summary:
      'Automatic reminders and recepits of installments for student due fees.',
    image: '{Fee}',
  },
  {
    name: 'Insightful student reports.',
    summary: 'Personalized reports for all your students.',
    image: '{Stats}',
  },
  {
    name: 'Online Tests',
    summary:
      'Conduct your online tests powered with automatic checking and solution.',
    image: '{Test}',
  },
];

и мой файл ModuleCards.js.

import PropTypes from 'prop-types';
import './ModuleCards.scss';

//Img import.

import Attendance from '../Common/assets/images/smartattendance.svg';
import Communication from '../Common/assets/images/parents.svg';
import Test from '../Common/assets/images/test1.svg';
import Stats from '../Common/assets/images/reports.svg';
import Class from '../Common/assets/images/classmgmt.svg';
import Fee from '../Common/assets/images/fee.svg';

//Data import

import card from '../Common/data/ModuleCardsData.js';

class ModuleCards extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const cardData = { ...this.props.cardData };
    return (
      <div className="module-card">
        <img src={this.cardData.image} />
        <h3>{this.cardData.name}</h3>
        <p>{this.cardData.summary}</p>
      </div>
    );
  }
}

ModuleCards.propTypes = {};
export default ModuleCards;

Как правильно отобразить массив из файла ModuleCardData?

Я пробовал много решений, таких как работа с реквизитом и т. Д. Особенно это относится к изображениям, это правильный способ отображения этих изображений или мне следует использовать другой метод?

Answer 1

ну, во-первых, вы должны экспортировать свой массив из ModuleCardData.js следующим образом

const myArrayCardData = [{
    name: 'Smart Attendance',
    summary: 'Keep parents updated with live Attendance and monthly reports',
    image: '{Attendance}',
  },
  {
    name: 'Parents Communication Module',
    summary:
      'Chat with parents anytime, anywhere. Disable chat when you are busy.',
    image: '{Communication}',
  }]

export default myArrayCardData;

Затем в своем файле реакции вы можете сделать что-то вроде

import cardData from './ModuleCardData';

а затем в вашем методе рендеринга сделайте что-то вроде:

  render() {
    return cardData.map(card => {
      return (<div className="module-card">
        <img src={card.image} />
        <h3>{card.name}</h3>
        <p>{card.summary}</p>
      </div>)
    })
  }