React中是否可为children设置自定义别名以提升代码可读性

结论 #

完全可以实现，直接使用JS对象解构的重命名语法即可，不需要修改组件的调用方式，完全符合你的使用偏好。

正确实现代码 #

export default function LinksBar({ children: links }) {
    return (
        <div>
            {links} {/* 此处已用links替代children，作用完全一致 */}
        </div>
    )
}

说明 #

• JS对象解构支持{ 原属性名: 自定义别名 }的语法，这里就是把React默认传入的children属性重命名为links，组件内部直接使用links变量即可，和直接用children的效果没有任何差异。
• 这种写法不需要改动组件的调用逻辑，你完全可以用你偏好的嵌套写法调用组件：

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

• 如果需要给这个别名设置默认值，可以组合使用解构默认值语法，示例如下：

// 当没有传入子元素时，links默认显示提示文字
export default function LinksBar({ children: links = <span>暂无可用链接</span> }) {
    return (
        <div>
            {links}
        </div>
    )
}

常见误区说明 #

你最初写的{ links = children }是错误写法：这个语法是给links这个自定义prop设置默认值为children，但此时你并没有从props中提取children变量，运行时会直接抛出children is not defined的报错，不能达到你的预期。

内容的提问来源于stack exchange，提问作者Shahriar