传递到组件时反应道具分解

Question

传递具有相同名称的道具时，是否可以使用es6速记形式？

const [showNavMenu, setShowNavMenu] = useState(false)

所以这：

<NavMenu showNavMenu={showNavMenu} setShowNavMenu={setShowNavMenu} />

会变成这样：

<NavMenu {showNavMenu} {setShowNavMenu} />

Answer 1

你总是可以使用扩展运算符，这是我最喜欢的将 props 传递给组件的方法

propsToPassthrough = {showNavMenu, setShowNavMenu}

然后

<NavMenu {...propsToPassthrough}>

Answer 2

如果您不想使用额外的变量，则可以执行以下操作：

<NavMenu {...{showNavMenu, setShowNavMenu}} />