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

Question

我正在使用 Gatsbyjs，它在内部使用 Reactjs。

在文件中/layouts/index.js，我有以下代码：

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

export default Layout;

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

更新

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

如果我删除了扩展运算符和/或 {}，

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

或者

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

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

标签： reactjsgatsby

Answer 1

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

绝对等于

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

  // `props` variable is still available here.

实际上，您只是将data属性从其他道具中取出，而仍然可以使用道具