Как организовать переиспользуемый код в блоке?

Как правильно вынести элементы <li> в переиспользуемый блок в компоненте <Comp>, чтобы поддерживать произвольное количество элементов <li>? Оставлять его в компоненте <Comp> или выносить в отдельный файл?
  • 16 ноября 2023 г. 5:59
Ответы на вопрос 3
Для организации переиспользуемого кода в блоке можно использовать компоненты в React.

Чтобы вынести элементы `<li>` в переиспользуемый блок в компоненте `<Comp>`, достаточно передать их в компоненту в качестве свойства (prop). 

Пример:

1. В файле `Comp.js` определите компонент `<Comp>`, который будет принимать массив элементов `<li>` в качестве свойства:

```javascript
import React from 'react';

const Comp = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default Comp;
```

2. В другом файле, где вы используете компонент `<Comp>`, передайте массив элементов `<li>` в свойстве `items`:

```javascript
import React from 'react';
import Comp from './Comp';

const App = () => {
  const listItems = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      <h1>My Component</h1>
      <Comp items={listItems} />
    </div>
  );
};

export default App;
```

Теперь у вас есть переиспользуемый компонент `<Comp>`, который можно использовать в других местах вашего приложения, просто передавая ему массив элементов `<li>` через свойство `items`. Он сохраняет возможность поддерживать произвольное количество элементов `<li>`, так как позволяет передавать массив переменной длины.
const data = [{header: "1", text: "1"}, {header: "2", text: "2"}];

const LiItem = ({header, text}) => (
  
  • {header}

    {text}

  • ); const Comp = () => (
      {data.map((el, idx) => )}
    );
    В данном случае нет единственно правильного способа переформулирования. Вы можете выбрать наиболее удобный для вас. 
    Я бы предложил простой вариант, не вдаваясь в детали (пропсы опущены):
    const Comp = () => (
      
      {data.map((item) => (
    • Cap1

      Text1

    • ))}
    ); P.S. Если все же хотите разделить, вы можете оставить тег li в родительском компоненте и вынести только его содержимое в отдельный компонент. Таким образом, связанные семантически теги HTML не будут разбросаны по разным файлам.
    Похожие вопросы