react中的解構賦值例子
阿新 • • 發佈:2019-02-05
const User = () => {
return (
<div className="content-inner">
<UserFilter {...userFilterProps} />
<UserList {...userListProps} />
<UserModalGen />
</div>
)
}
在React的設定中,初始化完props後,props是不可變的。
為了解決這個問題,React引入了屬性延伸,
以上程式碼和下面程式碼完全相同var props = { foo: x, bar: y }; var component = <Component { ...props } />;
var component = <Component foo={x} bar={y} />
當需要拓展我們的屬性的時候,定義個一個屬性物件,並通過{…props}的方式引入,在JSX中,可以使用
...
運算子,表示將一個物件的鍵值對與ReactElement
的props
屬性合併,這個...
運算子的實現類似於ES6 Array中的...
運算子的特性。,React會幫我們拷貝到元件的props屬性中。重要的是—這個過程是由React操控的,不是手動添賦值的屬性。它也可以和普通的XML屬性混合使用,需要同名屬性,後者將覆蓋前者:
var props = { foo: 'default' }; var component = <Component {...props} foo={'override'} />;