Как правильно вынести элементы <li> в переиспользуемый блок в компоненте <Comp>, чтобы поддерживать произвольное количество элементов <li>? Оставлять его в компоненте <Comp> или выносить в отдельный файл?
Для организации переиспользуемого кода в блоке можно использовать компоненты в 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}) => (
{text}
В данном случае нет единственно правильного способа переформулирования. Вы можете выбрать наиболее удобный для вас. Я бы предложил простой вариант, не вдаваясь в детали (пропсы опущены): const Comp = () => (); P.S. Если все же хотите разделить, вы можете оставить тег li в родительском компоненте и вынести только его содержимое в отдельный компонент. Таким образом, связанные семантически теги HTML не будут разбросаны по разным файлам.{data.map((item) => (
- ))}
Cap1
Text1