Как использовать один компонент с разными типами данных?

В React есть несколько способов использования одного компонента с разными типами данных. Здесь я расскажу о двух наиболее распространенных подходах:

1. Использование условий в компоненте:

В этом подходе вы можете использовать условные операторы для определения типа данных и в соответствии с этим рендерить разные элементы или возвращать разные компоненты. Например, предположим, у вас есть компонент MyComponent, который может принимать разные типы данных в свойствах data.

import React from 'react';

const MyComponent = ({ data }) => {
  if (typeof data === 'string') {
    return <div>{data}</div>;
  }

  if (typeof data === 'number') {
    return <span>{data}</span>;
  }

  // Если тип данных неизвестен
  return null;
};

export default MyComponent;

В примере выше, если data является строкой, компонент вернет <div>, если число - <span>, в противном случае компонент вернет null. Вы можете определить сколько условий и типов данных, сколько вам нужно для вашего компонента.

2. Создание оберточного компонента:

В этом подходе вы создаете оберточный компонент (WrapperComponent), который принимает все типы данных и передает их внутреннему компоненту (InnerComponent). Внутренний компонент затем принимает данные и отображает их в соответствии со своей логикой.

import React from 'react';

const InnerComponent = props => {
  // Логика отображения данных
};

const WrapperComponent = ({ data }) => {
  return <InnerComponent data={data} />;
};

export default WrapperComponent;

В данном случае WrapperComponent принимает data и передает его в InnerComponent. InnerComponent затем работает со своими методами, состоянием и свойствами для отображения данных.

В обеих этих методах вы можете использовать компоненты с разными типами данных в любом месте в вашем приложении. Это позволяет повторно использовать компоненты и дает большую гибкость при работе с разными типами данных.