Mam kilka komponentów, które nie mogą mieć tego samego składnika rodzicielskiego, ale chciałbym, żeby podzielili się swoim stanem.

W przypadku dyskusji Sake, powiedzmy, że składnik najwyższego poziomu nazywa się Main, a dzieci są nazywane Child1, Child2 itp

Czy jest dla mnie jakikolwiek sposób, aby mieć Child1 i Child2 być dziećmi komponentu {x2}}, tylko w sensie reagowania - więc mogę przejść Main "s nieruchomości i stan na nich z komponentu {x4}}?

Z perspektywy DOM Child1 i Child2 są umieszczone w zupełnie różnych obszarach mojej strony, a właściwie jest około 40 z nich.

3
Brad Parks 15 sierpień 2014, 22:06

2 odpowiedzi

Najlepsza odpowiedź

Zamiast bezpośrednio wywołując Setstate, możesz użyć emitera wydarzenia, a wszystkie instancje mogą zastosować ładunek do ich stanu.

Możemy użyć miksera do abstrakcji tego zachowania.

var makeChangeEventMixin = function(emitter){
   return {
       componentDidMount: function(){
           emitter.addListener('change', this.__makeChangeEventMixin_handler_);
       },
       componentWillUnmount: function(){
           emitter.removeListener('change', this.__makeChangeEventMixin_handler_);
       },
       __makeChangeEventMixin_handler_: function(payload){
           this.setState(payload);
       },
       emitStateChange: function(payload){
           emitter.emit('change', payload);
       }
   };
};

Następnie w naszym kodzie użymy Eventemitter (możesz użyć Eventemitter2 Jeśli nie używasz przeglądarki / webpack )

var EventEmitter = require('events').EventEmitter;
var fooEvents = new EventEmitter();

var Counter = React.createClass(){
    mixins: [makeChangeEventMixin(fooEvents)],
    getInitialState: function(){ return {count: 0} },
    render: function(){return <div onClick={this.handleClick}>{this.state.count}</div>},
    handleClick: function(){
        this.emitStateChange({count: this.state.count + 1});
    }
};

A jeśli masz 100 liczników, wszystkie będą aktualizują się po kliknięciu dowolnego z nich.


Jednym z tego ograniczenie jest to, że państwo początkowe będzie błędne. Można pracować wokół tego, śledząc stan w Makechangeeventmixixin, łącząc go na siebie i przy użyciu Wymieniania w Setstate. To będzie również bardziej występujący. Jeśli to zrobisz, miksin może zaimplementować odpowiednim getinitiTiTITITITITITITETITETET.

2
Brigand 15 sierpień 2014, 23:44

Jeden komponent kopalni nazywa ItemRenderer połączeń rendertrcomponent w trzech miejscach w Domu na Górze i na każdej aktualizacji (i sprawia, że pusta div w swoim prawdziwym pojemniku):

https://github.com/khan/perseus/blob/a1811f6b7a/src/item-remender.jsx#l66-l130.

Ma to na celu trochę trudne do rozumowania, ponieważ komponenty nie idą tam, gdzie rodzic ItemRenderera mówi im, ale może to działać, jeśli tego potrzebujesz.

2
Sophie Alpert 15 sierpień 2014, 18:57