-
-
Notifications
You must be signed in to change notification settings - Fork 328
Return multiple components on the same level #1213
-
I've just started working on making a simple prototype site. Is there any capability to return multiple components on the same level? The reason for doing so is to try and follow semantic html guidelines where the body tag might have a header, main, and footer tag without having to first place it into a div.
<body> <header>MyHeader</header> <main>The main content</main> <footer>MyFooter</footer> </body>
This is how I would think to do it, but the output is not as expected:
from reactpy import component, html, run from reactpy.backend.flask import configure @component def App(): return (header(), main(), footer()) @component def header(): return html.header("Home", navigation()) @component def main(): return html.main("Welcome to my site!") @component def navigation(): return html.nav("Item1", "Item2", "Item3", "Item4", "Item5") @component def footer(): return html.footer("This site was made with ReactPy") run(App, "127.0.0.1", 8080)
There is a way to get this to render, but it requires placing everything in a div:
from reactpy import component, html, run from reactpy.backend.flask import configure @component def App(): return html._(header(), main(), footer()) @component def header(): return html.header("Home", navigation()) @component def main(): return html.main("Welcome to my site!") @component def navigation(): return html.nav("Item1", "Item2", "Item3", "Item4", "Item5") @component def footer(): return html.footer("This site was made with ReactPy") run(App, "127.0.0.1", 8080)
Any help or guidance would be great. Thank you in advance!
Beta Was this translation helpful? Give feedback.
All reactions
For your scenario of
<body> <header>MyHeader</header> <main>The main content</main> <footer>MyFooter</footer> </body>
If you want to structure it as "multiple components on the same level", your second example is correct.
You need to use a parent HTML element, in this case html._ (a HTML fragment), to "encapsulate" things that are within the same level.
@component def App(): return html._(header(), main(), footer())
You can not directly return an iterable as a top-level root node within your component (such as your return (header(), main(), footer()) example.
Replies: 1 comment
-
For your scenario of
<body> <header>MyHeader</header> <main>The main content</main> <footer>MyFooter</footer> </body>
If you want to structure it as "multiple components on the same level", your second example is correct.
You need to use a parent HTML element, in this case html._ (a HTML fragment), to "encapsulate" things that are within the same level.
@component def App(): return html._(header(), main(), footer())
You can not directly return an iterable as a top-level root node within your component (such as your return (header(), main(), footer()) example.
Beta Was this translation helpful? Give feedback.