reactjs中的传播语法“...this.props”感觉很奇怪

Posted 2023-02-22

【中文标题】reactjs中的传播语法“...this.props”感觉很奇怪

【英文标题】：spread syntax "...this.props" in reactjs feels odd

【发布时间】：2019-03-31 18:29:23

【问题描述】：

在 JSX 中使用扩展运算符对 props 之类的对象做出反应似乎无法输出我期望的结果。

<Text ...this.props />

似乎被渲染成style="foo"，它应该是style:"foo" 为documented here。我在任何地方都找不到这个记录。我对 react 完全陌生，我正在尝试理解语法并想知道 react 是否在内部执行了类似这样的未记录的事情。

一个简单的测试突显了我的困惑：

const x = ...test:1.test;
alert(x);

提醒

1

这肯定不会编译：

<Text test: 1 />

【参考方案1】：

这记录在 React 文档here 中。

在这里复制粘贴，它声明：

如果你已经有 props 作为对象，并且你想在 JSX 中传递它，你可以使用 ... 作为“扩展”运算符来传递整个 props 对象。

它是完全有效的、记录在案的 JSX。

此外，它们提供了将 props 传递给组件的两种不同方法的示例——一种作为离散属性，另一种作为扩展对象——并注意就接收 props 的组件而言，它们是相同的：

function App1() 
  return <Greeting firstName="Ben" lastName="Hector" />;


function App2() 
  const props = firstName: 'Ben', lastName: 'Hector';
  return <Greeting ...props />;

将此扩展到上面的示例，您可以将这两个视为等效：

function App1() 
    return <Text test=1 />;


function App2() 
    const props = test: 1;
    return <Text ...props />;

至于它在后台如何工作的细节，请记住这是一个转译，所以我们不需要过多关注它在后台是如何工作的——只要你知道他们是等价的，一个是“捷径”，你应该没问题。

另外值得注意的是，文档指定应该谨慎使用传播方法，因为“传播属性可能很有用，但它们也可以很容易地将不必要的道具传递给不关心它们的组件或传递无效的 html DOM 的属性。”

希望这有助于你澄清事情！

【讨论】：

事实上 ...props 将（根据文档）转入 firstName: 'Ben', lastName: 'Hector' 而不是 firstName="Ben" lastName="Hector" 这就是我如此困惑的原因，因为 firstName: 'Ben' 在 JSX 中不是有效的语法

我不确定我是否遵循您的担忧——再说一次，您不应该过多地考虑将点差的输出作为直接消耗到JSX——归根结底，这是一个通过转译魔法允许的捷径，而不是直接消耗传播的组件。

我明白了，谢谢。所以我会记住，他们在后台做的事情不必在语法上有意义。正如你所说的那样翻译的魔力 :)

【参考方案2】：

解构从对象中提取键值对。

看看这个例子

const obj = 
  a: 'a',
  b: 'b'

现在，解构obj 将导致

const  a, b  = obj;
console.log(a);  // 'a'
console.log(b);  // 'b'

如果你在作为 React 组件的 props 传递时解构一个对象，就会发生这种情况

<Component ...obj />

这将在内部转换为

<Component a=a b=b />

因此，如果您将样式作为道具传递给组件，则应该这样做

const style = 
  background:'yellow'
 

<Component style=style />

或

const obj = 
  style = 
      background:'yellow'
     


<Component ...obj />

【讨论】：

你说 这将在内部转换为 - 这是我觉得没有记录的地方，他们从a:1 到@987654329 进行了另一次转换@

@Basti 它不是阴谋伙伴