使用具有其他名称的 React 子项

Question

children是否可以为react设置一个名称以获得更好的代码可读性？
我想要这样的东西：

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

我知道我可以通过道具传递它们，但我不想这样做（只是因为个人喜好）。

我不想要这个：

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

我要这个：

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

Answer 1

function LinksBar({ links = children })定义参数解构默认值，而不是解构重命名；它需要一个links属性，如果未找到该属性或具有 value undefined，则尝试将其默认为children范围内变量（可能会失败，因为没有属性）。

要重命名解构语法，您需要{children: links}：

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