Итерация/цикл по свойству вашего компонента в функции рендеринга в React

Введение

Я понимаю, что вам нужно динамически создавать некоторые элементы пользовательского интерфейса в функции рендеринга вашего компонента в React. Да! единственный способ - перебрать элементы, для этого вы можете использовать цикл for или функцию карты. Но реальный вопрос в том, разрешено ли нам делать это в React? К сожалению, не напрямую, вы можете столкнуться с некоторыми трудностями, особенно если у вас есть опыт работы с Angular. Вероятно, вы получали сообщение об ошибке неиспользуемое выражение, ожидалось присваивание или вызов функции, и теперь вы находитесь здесь, на этой странице, чтобы найти простое решение. Добиться этого не так уж и сложно, я объясню, как. Я надеюсь, вам понравится.

Задний план

У меня есть массив адресов, и мне нужно показать это в шаблоне печати, поэтому я подумал о создании отдельного компонента, который перебирает свойство элемента. И у каждого элемента массива есть свое свойство, и я хотел создать метки для каждого элемента. Здесь я собираюсь объяснить, как я это сделал.

Приступаем к кодированию

Во-первых, у меня есть интерфейс для свойств списка адресов, как показано ниже.

import { IAddressData } from "../../../interfaces/IAddressData";
export interface IAddressListProps {
    items: IAddressData[];
}

Теперь я создал компонент с именем PrintAddressList.tsx и написал некоторый код.

import * as React from "react";
import { IAddressListProps } from '../../detailPage/components/interfaces/IAddressListProps';
export class PrintAddressList extends React.Component<IAddressListProps, {}>{
  constructor(props: IAddressListProps) {
    super(props);
  }
  public render(): React.ReactElement<IAddressListProps> {
    return (
      <div>
      </div>
    );
  }
}

И мне нужно иметь свои собственные метки для каждого адреса внутри элемента div в функции рендеринга. Для этого я создал приватную функцию под названием createAddressCard, которая будет перебирать мои реквизиты и возвращать нужный мне HTML.

private createAddressCard = () => {
    let parent = [];
    this.props.items.map((address) => {
      parent.push(<div style={{ padding: '10px', border: '1px solid #ccc', margin: '5px' }}>
        <label>{config.colNames.addressList.clmnAddressType}: </label>
        <label>{address.Adressart}</label><br />
        <label>{config.colNames.addressList.clmnCompanyName}: </label>
        <label>{address.Firma}</label><br />
        <label>{config.colNames.addressList.clmnPlaceName}: </label>
        <label>{address.Ort}</label><br />
        <label>{config.colNames.addressList.clmnZipCode}: </label>
        <label>{address.PLZ}</label><br />
        <label>{config.colNames.addressList.clmnTelephone}: </label>
        <label>{address.Telefon}</label><br />
      </div>);
    });
    return parent;
  }

Теперь я могу легко вызвать эту функцию внутри функции рендеринга.

public render(): React.ReactElement<IAddressListProps> {
    return (
      <div>
        {this.createAddressCard()}
      </div>
    );
  }

Ниже приведен полный код компонента.

Вывод

В этом посте мы узнали, как мы можем повторять свойства наших компонентов внутри функции рендеринга в компоненте React для динамического создания пользовательских элементов.

Вы всегда можете подписаться на меня здесь, на Medium и в Twitter.

Твоя очередь. Что вы думаете?

Большое спасибо за чтение. Я пропустил что-нибудь, что, по вашему мнению, необходимо? Считаете ли вы этот пост полезным? Если да, пожалуйста, лайкните/поделитесь/похлопайте мне. Заранее спасибо.

С наилучшими пожеланиями
Сибиш Вену