Preact: Could not multi components was rendered to body of document?
Hi, there
I'm rewriting my blog using preact, and I found returning multi components to document, console occurs error:
nents/app.js: Adjacent JSX elements must be wrapped in an enclosing tag
My code is below:
export default class App extends Component {
render() {
return (
<Header/>
<Content/>
);
}
}
Before all components was rendered, it must be wrapped
linychuo
All 6 comments
I don't know much about Preact but from my React knowledge, you can't return multiple components from render method. You have to enclose them in <div> or any other tag and return them in render.
Note: In React 16, a new feature was added where you can return an array of elements without enclosing them in the single tag but I am not sure whether that feature exists in Preact or not.
vaishalshah
on 2 Nov 2017
Thanks @vaishalshah, I have found the new features of React, Hope preact also add the feature in the newest version.
linychuo
on 2 Nov 2017
It's on the ToDo list, but extremely difficult given Preact's current design.
developit
on 17 Nov 2017
Note: In React 16, a new feature was added where you can return an array of elements without enclosing them in the single tag but I am not sure whether that feature exists in Preact or not.
I'd mention that React 16.2 adds a special React.Fragment export with slightly different semantics from vanilla arrays. React fragments can be keyed which is handy for returning "tuples" from map.
The plan is to have JSX compile <> to <React.Fragment>, but there's a Babel pragma you can change (e.g. Preact could provide Preact.Fragment instead).
gaearon
on 29 Nov 2017
@developit I had a go at this yesterday evening, but was blocked on getting the babel toolchain upgraded to 7.x (jsx fragments are not supported in 6.x).
[!] (babel plugin) TypeError: Cannot read property 'spec' of undefined (While processing preset: "preact/node_modules/@babel/preset-env/lib/index.js"
Most likely this is caused by some devDependencies still requiring babel6 packages.
marvinhagemeister
on 29 Nov 2017
Closing, because progress of Fragments is tracked in #946
marvinhagemeister
on 1 May 2018
Related issues
youngwind
路
3Comments
matuscongrady
路
3Comments
jescalan
路
3Comments
matthewmueller
路
3Comments
kay-is
路
3Comments
Most helpful comment
It's on the ToDo list, but extremely difficult given Preact's current design.