JSX 中扩展运算符的奇怪行为

Posted 2023-02-21

【中文标题】JSX 中扩展运算符的奇怪行为

【英文标题】：Weird behavior of spread operator in JSX

【发布时间】：2021-03-23 21:20:51

【问题描述】：

JS环境下的扩展运算符

let obj1 = a:1,b:2
let obj2 = ...obj1
console.log(obj2)

Above code outputs a:1,b:2 Which is a copy of obj1

JSX 中的扩展运算符 让我们假设 this.props = lib:'react',lang:'js'

<App ...this.props/> 将与<App lib=this.props.lib lang=this.props.lang> 相同 我们知道 this.props 也是一个对象，就像 obj1 一样，为什么 JSX 会像 lib='react,lang='js' 而不是 lib:'react',lang:'js' 那样传播？ JSX 扩展运算符和 javascript 扩展运算符有区别吗？ 我真的很困惑

【参考方案1】：

我们知道 this.props 也是一个对象，就像 obj1 为什么 JSX 传播方式不同？

JSX 中的 语法用于 JavaScript 表达式，因此当我们使用 时，它不会被视为对象字面量。

这就是我们在想要传递一个对象时使用someProp=bla: 'foo' 之类的东西的原因，因为外部对告诉我们其中会有一个表达式。

简而言之，在 JSX 中使用 不会创建对象。

你可以阅读更多关于spread attributes的信息。

【讨论】：

但是我们不能将 props 发送到像下面这样的组件？ <App lib:'react',lang:'js' /> 因为 JSX 中的 可以被视为 Javascript，在以上代码sn -p

@Santhosh：是的，我们不能像你展示的那样将道具发送为组件，这就是我们传播它们并将它们作为值添加到道具对象的原因，然后我们需要对它们进行解构或提取从道具对象。我想你自己现在回答了一半的问题。我已经更新了我的答案。看一看。我相信你会了解这些东西

【参考方案2】：

在这两种情况下，它都只是一个扩展运算符和 JavaScript 扩展运算符。没有 JSX 扩展运算符之类的东西。

当我们做 <App ...this.props/> 时，它与 React 中的 <App a="1" b="2"/> 相同。 在 React 中，这些被添加到 App 类的 prop 对象中。从那个 prop 对象，我们可以分别访问值 a 和 b。

const App = (props)=>
   const a,b = props; // Object De-structuring

我们基本上是在传播 props，这意味着将这些值作为 Props 传递给 App 组件，.这与使用扩展运算符将值传递给函数相同。

可以这样想：将App Component 视为一个函数，它将展开的对象作为参数。

const App= (a,b)=> // Here we are De-Structuring from our props object
   console.log(a);
   console.log(b);


App(...obj1); // This is same as App(a,b)

Codepen 代码：https://codepen.io/emmeiWhite/pen/poEREEx?editors=1111

在 Javascript 文件中尝试上述代码

spread...操作符也可以用来克隆对象的时候我们这样做

let obj1 = a:1,b:2

let obj2 = ...obj1 

obj2 是 obj1 的克隆。一个完整的新对象。 obj1 和 obj2 现在是内存中的两个不同对象，而不仅仅是引用。

【讨论】：

我突然想到一个想法。我想我可以让你理解这种方式。所以基本上我们传播我们的值，它们作为道具单独传递给道具对象。从那个 props 对象中，我们得到了我们的值。希望你现在得到它。如果不是，我将再次解释:) 我现在意识到你的问题是正确的。好问题兄弟。如果需要，让我更新答案。我会先交叉检查

亲爱的@Imran 能否请您看一下link 中的cmets，它描述了我的全部观点

希望明天检查它，伙计......现在已经太晚了......