Как аккуратно передать информацию вмещающему компоненту? - PullRequest
Новая
       7

Как аккуратно передать информацию вмещающему компоненту?

0 голосов
/ 04 февраля 2019

Я невежественный новичок в mobx, который только что обнаружил, что делает странные вещи, такие как передача структуры "holder" в реквизитах внутреннему компоненту, который изменяет его содержимое, и таким образом распространяет изменения во внешний компонент.Это звучит довольно грязно, но передача множества обратных вызовов кажется еще более грязным.

Переданная информация содержит такие вещи, как индекс первого видимого элемента, который является чем-то, что никто, кроме внутреннего компонента, не может и не должен вычислять.Другие компоненты даже не должны знать, что есть полоса прокрутки или что-то подобное.

Я надеюсь, что этот фрагмент иллюстрирует мою проблему.Можете ли вы указать мне чистый раствор? 

@observer class Inner {
    _someChange = (event) => {
        this.props.holder.something = event.something
    }

    _anotherChange = (whatever) => {
        this.props.holder.anotherthing = whatever.anotherthing
    }

    render() {
        return <div>
            <Something onClick={this._someChange} onWhatever={this._anotherChange}/>
    </div>
}

@observer class Outer {
    @observable _holder = {
         something: 0,
         anotherthing: '',
    }

    render() {
        return <div>
            <Inner holder={this._holder}/>
            <AComponentNeedingTheHolderContent something={this._holder.something}/>
        </div>
    }
}

1 Ответ

0 голосов
/ 04 февраля 2019

Из того, что я понимаю, вы хотите иметь возможность обмениваться данными между братьями и сестрами Inner и AComponentNeedingTheHolderContent.

Способ сделать это с помощью React - сохранить состояние во Внешнем так, как вам нужно.Вы также должны определить функции, которые могут изменять это состояние и передавать их во внутреннюю.Например: 

@observer class Inner {
    clickHandler = (event) => {
        this.props.modify_something(event.value);
    }

    render() {
        return <div>
            <Something onClick={this.clickHandler}/>
    </div>
}

@observer class Outer {
    @observable something = 'something';

    @action
    modify_something = (modified_value) => {
        this.something = modified_value;
    }

    render() {
        return <div>
            <Inner modify_something={this.modify_something} />
            <AComponentNeedingTheHolderContent something={this.something}/>
        </div>
    }
}
...