Question

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

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

$('li').filter(function() { 
   return $(this).find('input:radio').val() == ""; 
}).addClass('active');

---------更新------

传入的数据是GraphQL查询返回的数据。这不是道具内的数据。

---------更新结束------

如果我删除了点差运算符和/或{}，

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

export default Layout;

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

或

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）和data从_ref.data解构。

Second case

const Layout =  ({props, data})

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

Third case

const Layout =  (...props, data)

只是语法错误

Reactjs为什么传递带有传播运算符的道具

2 个答案: