reactjs - 下面代码中的 是什么？

Question

import React from 'react'

export default (props) => (
    <div {...props}>
        <svg focusable="false" fill="white" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path>
        </svg>
    </div>
)

在上面的代码中，我们在 div 元素内传递 props。我们不用担心 svg 标签，而是从 React 角度来看代码是如何工作的？

Answer 1

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

因此，每当您调用该组件时，假设您按名称调用它 <MyIcon />每当您将任何 prop 传递给该组件时，它都会被转发到 div通过使用{...props} (我们可以在 props 上使用扩展运算符 ...，因为 props 只是一个对象)。

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

上面的代码会通过style , className ，和id支持div .

简而言之，无论您传递给 MyIcon 的任何 Prop ，将被传递到div .