{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 1. Короткий ответ"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В React "},{"type":"text","marks":[{"type":"bold"}],"text":"JSX можно передавать внутрь компонента как “вложенный контент”"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а внутри принимающего компонента он доступен через "},{"type":"text","marks":[{"type":"code"}],"text":"props.children"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 2. Пример: базовая передача JSX"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Card(props) {\n return

{props.children}

;\n}\n\nfunction App() {\n return (\n \n

Заголовок карточки

Описание карточки

\n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Здесь:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":" ... "},{"type":"text","text":" — родительский компонент;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Всё, что внутри ("},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"
"},{"type":"text","text":"), React передаёт в "},{"type":"text","marks":[{"type":"code"}],"text":"props.children"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент "},{"type":"text","marks":[{"type":"code"}],"text":"Card"},{"type":"text","text":" выводит "},{"type":"text","marks":[{"type":"code"}],"text":"{props.children}"},{"type":"text","text":" внутри себя."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💡 Результат:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"
\n
Заголовок карточки
\n
Описание карточки
\n
\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 3. Деструктуризация для краткости"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Card({ children }) {\n return
{children}
;\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 4. Пример с несколькими вложенными JSX-элементами"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n $\"Фото\"$ \n
Товар
\n
Цена: 100₽
\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"→ Всё это будет передано в "},{"type":"text","marks":[{"type":"code"}],"text":"props.children"},{"type":"text","text":" как "},{"type":"text","marks":[{"type":"bold"}],"text":"массив элементов JSX"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"props.children = [\n ,\n

Товар

,\n

Цена: 100₽

,\n \n];\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 5. Передача JSX как обычного "},{"type":"text","marks":[{"type":"code"}],"text":"prop"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Иногда JSX можно передать не как "},{"type":"text","marks":[{"type":"code"}],"text":"children"},{"type":"text","text":", а как "},{"type":"text","marks":[{"type":"bold"}],"text":"именованный prop"},{"type":"text","text":"."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Layout({ header, footer, children }) {\n return (\n

{header}

{children}

\n \n

\n );\n}\n\nfunction App() {\n return (\n Заголовок сайта}\n footer={

}\n >\n

Основной контент страницы

\n \n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Так можно передавать "},{"type":"text","marks":[{"type":"bold"}],"text":"разные JSX-блоки"},{"type":"text","text":" в определённые “слоты”."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 6. Передача JSX через переменные"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"JSX — это обычное выражение, его можно хранить в переменной и передавать как значение "},{"type":"text","marks":[{"type":"code"}],"text":"prop"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const content =

Это контент карточки

;\n\n{content}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Или:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Контент

} />\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"и внутри компонента:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Card({ content }) {\n return

{content}

;\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 7. Пример — компонент-контейнер"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Modal({ title, children }) {\n return (\n

{title}

{children}

\n );\n}\n\n\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📦 Здесь "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — это JSX, переданный как "},{"type":"text","marks":[{"type":"code"}],"text":"children"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 8. Что можно передавать как JSX"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ты можешь передавать:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"текст:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Привет!\n"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"JSX-элементы:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"

Описание

\n"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"массив элементов:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"{[

]}\n"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"даже "},{"type":"text","marks":[{"type":"bold"}],"text":"другие компоненты"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 9. React.Children API (для продвинутых случаев)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если тебе нужно обработать "},{"type":"text","marks":[{"type":"code"}],"text":"children"},{"type":"text","text":" внутри компонента — React предоставляет специальные методы:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Wrapper({ children }) {\n return (\n

\n {React.Children.map(children, (child, i) => (\n

{child}

\n ))}\n

\n );\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧩 "},{"type":"text","marks":[{"type":"code"}],"text":"React.Children.map"},{"type":"text","text":" помогает безопасно пройтись по всем переданным JSX-элементам, даже если они не массив."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 10. Итого"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Способ"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда использовать"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"props.children"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"..."}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Контейнеры, layout-компоненты"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"JSX как prop"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"} />"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Несколько “слотов”"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"JSX в переменной"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"const c =

...

"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Динамическая передача"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"React.Children.map"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обработка "},{"type":"text","marks":[{"type":"code"}],"text":"children"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При сложной структуре"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Как передать JSX внутрь другого компонента?

Комментарии