为什么在这个JSX元素中我必须使用展开运算符？

14 浏览
0 Comments

为什么在这个JSX元素中我必须使用展开运算符？

我有一个功能组件，它返回一个锚元素，可以根据传递给它的props拥有href和role属性：

function Item(props) {
    return (
        
            {props.children}
        
    );
}

在创建这个组件时，我首先尝试不使用扩展运算符传递props，像这样：

但是这给出了错误：

Parsing error: Unexpected token, expected "..."

所以目前，我已经让我的组件按照我想要的方式工作，但是我无法弄清楚为什么我必须使用扩展运算符。在我的代码的其他部分（比如第4行）我不需要它。我在这个问题和这个问题以及React文档中都读到了它，但我仍然不确定。

0

3 答案

0 Comments

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

在上述代码中，我们可以看到一个名为Item的函数组件。它接收一个名为props的参数，并返回一个包含a标签的JSX元素。在这个例子中，我们从代码中提取了一部分代码作为示例。

假设props.toSubMenu不为null，我们将其转换为纯html后，会得到一个无法正常工作的结果。原因是我们在a标签中直接写入了{role: 'button'}，而不是通过属性传递。

为了解决这个问题，我们可以使用spread操作符。在代码中，通过{...props.toSubMenu && ...{role: 'button'}}的形式使用了spread操作符。它会将对象{role: 'button'}展开，结果如下：

function Item(props) {
    return (
        
            {props.children}
        
    );
}

需要注意的是，在{...props.toSubMenu && {role: 'button'}}这段代码中，最外层的{}不是表示对象的符号，而是表示在jsx文件中运行代码片段的符号。

总结起来，我们不一定非要使用spread操作符，也可以通过直接传递属性的方式来实现相同的效果，如下所示：

function Item(props) {
    return (
        
            {props.children}
        
    );
}

但是，既然props中已经定义了role属性，为什么不直接使用spread操作符来展开它呢？这样做更加简洁和直观。

0
0 Comments

在这个JSX元素中为什么必须使用扩展运算符？

在JSX中，{}不像许多模板语言那样直接输出字符串。你需要将其视为一个赋值操作，其中左侧是属性。现在根据设置的属性来设置值，只需按照相同的逻辑进行即可。这样解释了为什么错误提示说期望“...”。如果{}不位于赋值的右侧，那么就期望你想要扩展多个属性。

所以，尝试这样做：

function Item(props) {
    return (
        
            {props.children}
        
    );
}

通过使用扩展运算符{...props}，可以将props对象中的所有属性扩展到元素中。这样，不管props中包含哪些属性，都可以正确地设置元素的属性值。示例代码如下：

function Item(props) {
    return (
        
            {props.children}
        
    );
}

这样，无论props中有多少个属性，都会被正确地应用到元素中，避免了手动一个一个地设置属性值的麻烦。

0
0 Comments

问题的出现的原因：在这个JSX元素中为什么必须使用扩展运算符？

解决方法：通过给元素添加role属性并将其设置为'button'，以及仅仅转发href属性，可以解决这个问题。

以下是解决方法的代码示例：

function Item(props) {
    return (
        
            {props.children}
        
    );
}

尽管这个解决方法是可行的（与我在问题中发布的代码一样），但它并不完全回答我的问题。

0