Use React children with another name-CodePudding

Is it possible to set a name for children in react for better code readability?
I want something like this:

default function LinksBar({ links = children }) {
    return (
        <div>
            {links} {/* instead of {children} */}
        </div>
    )
};

I know I can pass them in props, but I don't want to do it this way (just because of personal preference).

I don't want this:

<LinksBar links={<><Link href="1" /><Link href="2" /><>} />

I want this:

<LinksBar>
    <Link href="1" />
    <Link href="2" />
<LinksBar/>

CodePudding user response：

You can alias it, although React speaking, it's less readable, in my opinion:

function LinksBar({ children: links })

CodePudding user response：

function LinksBar({ links = children }) defines a parameter destructuring default, not destructuring renaming; it expects a links property and, if it's not found or has the value undefined, tries to default it to a children in-scope variable (presumably failing because there isn't one).

For renaming destructuring syntax, you want {children: links} instead:

default function LinksBar({children: links}) {
    return (
        <div>
            {links}
        </div>
    )
}