不变性帮助者更新一个资产，而不更新其他资产？

Question

我的jsx样式如下：

let styles = {
    appBarStyle: {
        display: 'flex',
        flexWrap: 'nowrap',
        WebkitFlexFlow: 'nowrap',
        flex: '1 1 0%',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0',
        margin: '0',
        listStyle: 'none',
        backgroundColor: '#00bcd4',
        fontFamily: 'Roboto',
        minHeight: '64px',
        color: 'white',
        fontSize: '2em',
        margin: '0px',
        padding: '0px',
        width: '100%',
        zIndex: '2',
        position: 'static',
        top: 'auto',
        left: 'auto',
        right: 'auto'
    }
};

我希望它的位置：固定在智能手机和IOS上，而不是台式机上。

所以我有一些使用不可变性帮助程序的代码：

if (useFixedMenuBar) {
    styles = update(styles, {
        appBarStyle:{top: {$set: '0px'}},
        appBarStyle:{left: {$set: '0px'}},
        appBarStyle:{right: {$set: '0px'}},
        appBarStyle:{position: {$set: 'fixed'}},
}

在调用update之后，position属性正确更新为fixed，但是top，left和right属性不会更新为0px，而是仍设置为auto。

我想念什么？

Answer 1

我认为您正在覆盖appBarStyle键的设置，因此仅设置了最后一个，然后进行更新。试试：

styles = update(styles, {
    appBarStyle:{
        top: {$set: '0px'},
        left: {$set: '0px'},
        right: {$set: '0px'},
        position: {$set: 'fixed'},
    }
})