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'} />;