我可以使用'<component {…pageProps} /> ' 我通常在 React.js 的 Next.js 的 _app.js 中找到

Question

最近我发现了这篇文章： Next.js 中的页面转换，使用 Framer Motion进行页面转换，我很好奇：

<Component {...pageProps} />

在我读过的文章中的代码中使用了它：

import "../styles/theme.sass"
import "@fortawesome/fontawesome-free/css/all.css"
import { AnimateSharedLayout } from "framer-motion"

function MyApp({ Component, pageProps }) {
  return (
    <AnimateSharedLayout>
      <Component {...pageProps} />
    </AnimateSharedLayout>
  )
}

export default MyApp

看了其他文章，这个代码一般用在Next.js中。

我可以将此代码用于 React.js 吗？ 如果不是，那么在 React.js 中与此代码等效的其他方式是什么？

Answer 1

您能否更详细地描述一下您要归档的目标是什么？

这些示例显示了一个 React 组件，您将pageProps Object 的所有属性传播到该组件。 这是将所有属性传递给特定组件的便捷方式。 例如：

const user = {
  name: ‘John Doe’,
  age: 42,
};

return <User name={user.name} age={user.age} />

可以简化为

const user = {
  name: ‘John Doe’,
  age: 42,
};

return <User {...user} />

两种方法都有其优点和缺点。 使用扩展运算符更简单，但单独定义每个属性更明确。 传播的概念并不是 React 特有的，而是 ES2015 中引入的概念。