javascript - 在reactjs中的函数参数中使用参数和变量

Question

我有一个函数类型的 react 组件:

function Card(props, {icon}) {
    return (
        <div className="card">
            <FontAwesomeIcon icon={icon} className="icon"/>
            <h3 className="text">{props.name}</h3>            
        </div>
    )
}

我想要它有 2 个属性:name 和 icon 但要在标题中显示名称，我需要使用 props.name 但图标只是一个属性。当我传递这样的参数时，我只能得到名称，如果我只传递图标，我就能够得到图标，但我无法同时拥有它们。 (该图标是一个 Fontawesome 组件)。

我在 App.js 中这样调用它:

<Card name="Folder" icon="folder"/>

我怎样才能做到这一点？

Answer 1

<Card name="Folder" icon="folder"/>

你的 props 对象现在看起来像

const props = {
   name: "Folder",
   icon: "folder",
}

然后我们可以使用object destructuring当我们将它传递到我们的组件中时。

function Card({icon, name}) {
    return (
        <div className="card">
            <FontAwesomeIcon icon={icon} className="icon"/>
            <h3 className="text">{name}</h3>            
        </div>
    )
}