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.
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. @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 |
Beta Was this translation helpful? Give feedback.
For your scenario of
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.You can not directly return an iterable as a top-level root node within your component (such as your
return (header(), main(), footer())example.