下面代码中的<div {...props}>是什么？

Question

Answer 1

在上面的代码中，您正在导出一个匿名反应功能组件。

因此，每当您调用该组件时，假设您通过名称来调用它

<MyIcon />

，并且每当您将任何道具传递给该组件时，它都会通过使用

div

转发到

{...props}（我们可以在道具上使用扩展运算符
...
）因为 props 只是一个对象）.

...
<MyIcon style={{ backgroundColor:"red" }} className="myIcon" id="icon"/>
...

上面的代码会将

style

、

className

和

id

属性传递给

div

。

简而言之，您传递给

MyIcon

的任何道具都将传递给

div

。

Answer 2

这将允许导出组件的用户传递要在 div 上呈现的 props，例如样式、className、事件处理程序等，而组件不需要知道或关心这些 props 是什么。

Answer 3

{...props}

 意味着我们将把所有道具/属性传递给该元素。例如，您有一些如下所示的道具

const { width, height, isOn, isRed } = props

如果你想传递所有这些道具，手动方式可以

<div width={width} height={height} isOn={isOn} isRed={isRed}></div>

仍然不错，但是如果你还有大约 10 个道具需要通过怎么办？

简单的方法可以是

<div {...props}></div>

里面的所有道具

props

都会自动传递

您可以在

Answer 4

It(

...

)被称为spread属性，用于使多个props的传递变得容易。

例如，如果你有任何具有 3 个状态/值的组件，并且你想将它们作为 props 传递给其他组件，听起来很容易，但如果你有 100 个 props 需要传递，它就会变得很混乱。

<MyComponent one={} two={} three={} .... upto 100 props />

因此，您可以将它们包装到一个对象中并使用这种展开表示法，而不是传递 100 个道具。

MyObject = { one:1, two:2, three:3, ....., hundred:100 };

<MyComponent {...props} />

在这种情况下，如果你打开 MyComponent，要提取所有 props ，你可以这样做

import React from 'react'

const MyComponent = (props) => (
    return(
  <div {...props}>
   .
   .
   .            
  </div>
 }
)