为什么在 Reactjs 中使用传播运算符传递道具有效

Question

我正在使用内部使用 Reactjs 的 Gatsbyjs。

在文件/layouts/index.js中我有这个代码：

const Layout =  ({...props, data})  => {
..........
}

export default Layout;

export const query = graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
        smallBreakPoint
      }
    }
  }
`

更新

传入的数据是GraphQL查询返回的数据。不是props里面的数据。

如果我移除展开运算符 and/or {}，

const Layout =  ({props, data})  => {

或

const Layout =  (...props, data)  => {

它停止工作了。为什么会这样？

Answer 1

const Layout = ({ ...props, data }) =>

绝对等于

const Layout = (props) => {
  const { data } = props

  // `props` variable is still available here.

实际上，您只是将 data 属性从其他道具中拿走，同时仍然可以使用道具

Answer 2

最好的理解方式是使用 Babel REPL 并查看生成的代码。
First case

const Layout =  ({...props, data})

如您所见，props 包含传递给函数 (_ref) 的原始对象和从 _ref.data.

解构的 data

Second case

const Layout =  ({props, data})

另一方面，您可以看到 props 和 data 从 _ref（传递的对象）

中解构

Third case

const Layout =  (...props, data)

只是语法错误

为什么在 Reactjs 中使用传播运算符传递道具有效

Why passing in props with spread operator works in Reactjs

reactjs

gatsby

更新