为什么我必须在这个JSX元素中使用spread操作符？

Question

我有一个函数组件，它返回一个锚点元素，该元素可以具有属性href和角色，这取决于传递给它的props：

function Item(props) {
    return (
        <a {...props.toSubMenu && {role: 'button'}} {...props.href && {href: props.href}}>
            {props.children}
        </a>
    );
}

创建此组件时，我首先尝试通过props，而不使用像这样的扩展运算符：

分析错误：意外令牌，应为“…”

所以目前，我的组件按照我想要的方式工作，但是我不明白为什么我必须使用扩频运算符。在代码的其他部分（如第4行），我不需要它。我已经在这个问题和这个问题以及反应留档中读到过，但我仍然不确定。




Answer 1

在JSX中，{}不会像在许多模板语言中那样输出字符串，您需要将其视为一个赋值，其中左手是属性，现在根据设置属性设置值，只需遵循相同的逻辑：解释为什么错误显示为预期“…”。如果{}不在赋值的右侧，那么您可能希望分散多个属性，因此，请尝试以下方法

function Item(props) {
    return (
        <a role={props.toSubMenu ? 'button' : undefined} href={props.href}>
            {props.children}
        </a>
    );
}

Answer 2

• 我从您的代码中提取这个作为示例

function Item(props) {
    return (
        <a {...props.toSubMenu && {role: 'button'}} >
            {props.children}
        </a>
    );
}

• 让我们假设props.toSubMenu不是null

function Item(props) {
    return (
        <a {role: 'button'} >
            {props.children}
        </a>
    );
}

• 如果像这样使用扩散运算符

function Item(props) {
    return (
        <a {...props.toSubMenu && ...{role: 'button'}} >
            {props.children}
        </a>
    );
}

• 它将对象{role:'button'}展开为：

function Item(props) {
    return (
        <a role="button" >
            {props.children}
        </a>
    );
}

• 有一点要注意：在

{...props.toSubMenu && {role: 'button'}}

最外面的{}不是对象的符号，它是代码段在jsx文件中运行的符号。

• 您不必使用排列操作，这同样有效

function Item(props) {
    return (
        <a role={props.toSubMenu && 'button'} >
            {props.children}
        </a>
    );
}

• 但是既然角色已经在道具中定义好了，为什么不把它展开呢

Answer 3

我想你想给我

function Item(props) {
    return (
        <a role={props.toSubMenu ? 'button' : undefined} href={props.href}>
            {props.children}
        </a>
    );
}