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)  => {

перестал работать.

Может ли кто-нибудь помочь объяснить?

Спасибо

Answer 1

Лучший способ понять - это использовать Babel REPL и посмотреть, какой код создается.
Первый случай

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

Как видите, props содержит исходный объект, переданный в функцию (_ref) и data, деструктурированный из _ref.data.

Второй случай

const Layout =  ({props, data})  

С другой стороны, здесь вы можете видеть как props, так и data, деструктурированные из _ref (переданный объект)

Третий случай

const Layout =  (...props, data) 

Это просто синтаксическая ошибка

Answer 2

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

абсолютно равно

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

  // `props` variable is still available here.

На самом деле, вы просто отбираете атрибут data у других реквизитов, хотя все еще можете использовать реквизиты