Как правильно вынести элементы <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