{...status}这种写法怎么理解

新手上路,请多包涵

在学react-hooks时看到这样一段代码

function Box(props) {

 const [value, setValue] = useState(0)
 
 let status = useSigninStatus(false)

 function Incv(){
   return setValue(value+1)
 }

 function Decv(){
   return setValue(value-1)
 }

 return(
   <div >
     <header>
       <Signin {...status} />
       <Counter isSignin={status.isSignin}  value={value} Incrm={Incv} Decrm={Decv} />
     </header>
   </div>
 )
}

value={value}我懂,不过Signin这里直接写{...status}我没见过,想问一下怎么理解,是特殊的语法吗?

阅读 3.7k
3 个回答

这种写法类似于python中的**kwargs,比如我们的 status 是:

status = {
    arg1: '1',
    arg2: '2'
};

那当我们使用 {...status}这样的语法时就相当于将对象里的键和属性相对应

<Signin {...status} />
<!--等价于-->
<Signin arg1='1' arg2='2' />

扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(1, ...[2, 3, 4], 5)
1 2 3 4 5

“展开”status:

const status = {a: "a", b: "b"};
{ ...status } // => { a: "a", b: "b" }
{ c: "c", ...status, d: "d" } // => { a: "a", b: "b", c: "c", d: "d"}

所以,{...status}相当于Object.assign({}, status);

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题