Comments (10)
I don't personally have a use for it, but I'm assuming it's a feature Preact will need to support. It doesn't fit well into the current model, but that's something I'm already changing.
from preact.
Hi @nightwolfz,
Just return props.children[0]
, no wrapper should be required. In preact, children
is always an Array. This avoids needing to build an API for managing an abstract "maybe array" type. preact-compat
does include the React.Children
for abstracting this if you need them to look identical.
Here's your code with the added [0]
working:
https://jsfiddle.net/developit/jqd96rhv/
Cheers!
from preact.
There is an experimental PR: #703.
from preact.
Thanks @developit
That works if you know that you will only have one child.
Is it possible to return an array of children from the render method without wrapping?
https://jsfiddle.net/cfvcrr7d/1/
from preact.
No, sorry :( - Neither React nor Preact support that. It has to do with tracking DOM Node ownership. I have a few thoughts around how it might be possible to implement, but they are all pretty bloated sadly. In my own work, the couple times I've wanted to do this I actually use a function
instead of a component. Since a lot of my components are just pure functions that take props and return JSX, it's as simple as swapping out <Foo />
for {Foo()}
:
const ITEMS = [1, 2, 3, 4, 5];
const List = () => (
<div>
<h1>list of things:</h1>
<ul>
{ ListItems() }
</ul>
</div>
);
const ListItems = () => (
ITEMS.map( item => <li>{ item }</li> )
);
from preact.
You're right, I incorrectly assumed that React always returns children
as an array as well but this seems not to be the case.
from preact.
@developit sad thing :-) Would be great to get "returning arrays" support.
from preact.
@developit I think Fiber is going to support this. Have you had any thoughts on this since your last reply? We've supported this in the past in Skate and it was quite convenient.
from preact.
Is there anything new? Does 8.2.1 support it?
from preact.
You saved space on a Maybe class definition, which is fixed saving, but every component must have extra 3 letters.
from preact.
Related Issues (20)
- Implement onscrollend event attribute for TypeScript JSX
- TypeScript JSX focus events don't have consistent case HOT 5
- Typescript issues in 10.19.4+ with @mui/material HOT 5
- Provide a boundary between Components and DOM HOT 8
- `preact` `10.9.4+` requires double click or move pointer out of `@headlessui/react` `Tab` panel/button HOT 2
- Unmount hooks should be called during the commit phase to ensure consistency with React HOT 2
- When I attempt to extend HTMLAttributes every intrinsic element becomes of type any HOT 2
- Current plan for event types? HOT 3
- onFocusIn and onFocusOut events incorrectly set HOT 4
- Cannot read properties of undefined (reading '__m')
- `hydrate` doesn't replace attributes at root replaced node HOT 4
- Unable to use hooks in compiled package
- Compatibility issue: Jest mock works in React / fails in Preact when using ForwardRef in a component HOT 2
- Using useState leads to error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__H') HOT 3
- Render mui cache inside shadow dom leaves style sheets in head and content unstyled HOT 2
- `defaultValue` incorrectly (?) diffed against prerendered HTML
- Preact 10.20 + @mui/x-data-grid v7 causes datagrid to appear multiple times in dev-mode, but not in preview-mode HOT 1
- Performance of unmounting a context provider
- Runtime error when using an external react module HOT 5
- Incorrect namespacing of MathML elements
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preact.