node.js - 不变性助手更新一个属性但不更新其他属性？

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'}},
}

在调用 to 之后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'},
    }
})