Передача Immutable.Maps в качестве реквизита в компонентах React - PullRequest
0 голосов
/ 18 октября 2019

Кажется, что неизменяемая библиотека становится действительно популярной для 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(), а приведение туда и обратно между неизменяемыми объектами и обычными объектами лишает цели использования неизменной библиотеки. Есть ли способ обойти это?

1 Ответ

0 голосов
/ 30 октября 2019

Нет, вы не сможете использовать спред. Вы можете рассмотреть возможность использования записей. Хотя вы не можете распространять их (вам все равно потребуется toJS (), чтобы распространять их), у вас все же есть больше полезностей, чем с Maps https://immutable -js.github.io / immutable-js / docs / # /Запись

У записей много общих методов с Картами, и вы можете получить доступ к свойствам так же, как и с обычным объектом 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. Затем вы можете использовать myRecord так же, как вы бы использовали jsObject, и вы также можете получить доступ к методам, которые вы использовали с картами, например:

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

Так что вы не будетебыть в состоянии распространить их. но вы сможете разобрать их. и получить доступ к свойствам, как с обычными jsObjects

...