Reactjs Jak zmienić stan elementu z innym komponentem

Question

mam reagować składnik, pozwala nazwać jako składnik 1

define([..., /path/component_2.jsx], function(..., Component2) { 
    var Component1 = React.createClass({ 
     getInitialState: function() { 
     return {.......}; 
     }, 

     componentDidMount: function() { 
      ....... 
      dates = ....; 
      Component2.setState({dates: dates}); 
     } 
     render: function() { return (<div ...></div>) } 
    }); 
} 

Jak widać, jestem wywołanie Component2.setState w tym komponencie . Ale dostaję błąd, jak setState nie jest funkcją. Próbowałem tego z definiowaniem funkcji niestandardowej zamiast funkcji setState w komponencie 2 i wywoływania tej funkcji z komponentu 1, ale otrzymuję ten sam błąd, "nie jest funkcją".

i komponent 2:

define([..., ], function(...) { 
    var Component2 = React.createClass({ 
     getInitialState: function() { 
     return {.......}; 
     }, 

     render: function() { return (<div ...></div>) } 
    }); 
} 

Więc myślę, że w reactjs wywołuje komponent tylko do renderowania coś (React elementów DOM)? i nie można zmienić stanu komponentu?

Jeśli tak, to w jaki sposób mogę zmienić stan komponentu z innego komponentu, który nie jest początkowo dzieckiem lub rodzicem?

Answer 1

Komponenty nie ujawniają publicznie ich stanu. Ważne jest również, aby pamiętać, że stan jest określony na poziomie instancji składników, a nie ich definicji.

Aby komunikować się między komponentami, można przetworzyć własną usługę subskrypcji zdarzeń.

var events = new EventEmitter(); 

// inside Component1 
events.emit('change-state', newState); 

// inside Component2 
events.on('change-state', function(state) { 
    this.setState(state); 
}); 

Jednak szybko będzie to trudne do zarządzania.

Bardziej rozsądnym rozwiązaniem jest użycie Flux. Umożliwia jawne zarządzanie stanem całej aplikacji i subskrybowanie zmian w różnych bitach stanu, w obrębie składników. Warto spróbować owinąć wokół niego głowę.

Komponent, który chce się komunikować, powinien wysłać akcję, a ta czynność będzie odpowiedzialna za zmianę czegoś w sklepach, drugi składnik powinien zasubskrybować ten sklep i zaktualizować jego stan na podstawie tej zmiany.

Answer 2

Możesz użyć stanu współdzielonego między dwoma komponentami. można zbudować „wstawek” jak tego

app.mixins.DateMixin = { 
    getInitialState: function() 
     return { 
      dates: [] 
     } 
     } 
}; 

a następnie w was elementów można uwzględnić to wstawek z wykorzystaniem tablicy wstawek

define([..., /path/component_2.jsx], function(..., Component2) { 
    var Component1 = React.createClass({ 

     mixins: [app.mixins.DateMixin], 

     getInitialState: function() { 
     return {.......}; 
     }, 

     componentDidMount: function() { 
      ....... 
      dates = ....; 
      this.setState({dates: dates}); 
     } 
     render: function() { return (<div ...></div>) } 
    }); 
} 

define([..., ], function(...) { 

    mixins: [app.mixins.DateMixin], 

    var Component2 = React.createClass({ 
     getInitialState: function() { 
     return {.......}; 
     }, 

     render: function() { return (<div ...></div>) } 
    }); 
} 

Teraz twoje komponenty dzielić stan „daty” i można zmień/sprawdź to w obu. NB: można również udostępniać metody w ten sam sposób, pisząc do komponentu mixin.

Edit: Proponuję, aby odwiedzić tę stronę http://simblestudios.com/blog/development/react-mixins-by-example.html