Immutability-Helper 更新一个属性但不更新其他？

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

我希望它在智能手机上是 position:fixed，在台式机上是 IOS，但不是。

所以我有一些使用 immutability-helper 的代码：

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

Immutability-Helper 更新一个属性但不更新其他？

Immutability-Helper Updating One Property but not Others?

node.js

reactjs

immutability-helper

Immutability-Helper 更新一个 属性 但不更新其他？

Immutability-Helper Updating One Property but not Others?

node.js

reactjs

immutability-helper

Immutability-Helper 更新一个属性但不更新其他？