Question

对于React来说，不可变库似乎正变得非常流行。但是，我在使用Immutable.Map对象作为道具时遇到了麻烦。看来Immutable.Map在...扩展运算符上不能很好地发挥作用，我通常在组件需要大量道具时使用它。

export class Container extends React.Component {
    const profileProps = {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
    };

    // other code adding more keys

    render() {
        return <Profile {...profileProps} />;
    }
}

我唯一要解决的方法是使用profileProps.toJS()，并且在不可变对象和常规对象之间来回转换首先就破坏了使用不可变库的目的。有办法解决吗？

Answer 1

不，您将无法使用价差。您可以考虑使用记录。尽管您无法传播它们（您仍然需要toJS（）来传播它们），但与Maps https://immutable-js.github.io/immutable-js/docs/#/Record

相比，您仍然拥有更多的好处。

记录与Maps共享许多方法，您可以像使用普通js对象一样访问属性。

从文档中：

const { Record } = require('immutable');
const ABRecord = Record({ a: 1, b: 2 }); // Here you create a record factory
const myRecord = ABRecord({ b: 3 }) // Create a Record using that factory

在“记录”工厂中，您可以定义记录的结构和默认值，以防不提供值。在上面的示例中，myRecord.a等于3 然后，可以像使用jsObject一样使用myRecord，还可以访问u过去用于地图的方法，例如：

const p = myRecord.get('b') // This will equal 3
const p = myRecord.b // This will equal 3
const {a, b} = myRecord // Will deconstruct

所以您将无法传播它们。但您可以解构它们。并像使用普通jsObjects一样访问属性

将Immutable.Maps作为prop传递给React组件

1 个答案: