Używam klas es6 i skończyłem z kilkoma złożonymi obiektami na moim najwyższym stanie i próbowałem uczynić mój główny komponent bardziej modułowym, więc stworzyłem prostą otokę klasy, aby zachować stan na najwyższym komponencie, ale pozwolić na bardziej lokalną logikę .
Klasa opakowująca przyjmuje funkcję jako konstruktor, która ustawia właściwość stanu głównego składnika.
export default class StateWrapper {
constructor(setState, initialProps = []) {
this.setState = props => {
this.state = {...this.state, ...props}
setState(this.state)
}
this.props = initialProps
}
render() {
return(<div>render() not defined</div>)
}
component = props => {
this.props = {...this.props, ...props}
return this.render()
}
}
Następnie dla każdej złożonej właściwości w stanie głównym tworzę jedną klasę StateWrapped. Możesz tutaj ustawić domyślne właściwości w konstruktorze, które zostaną ustawione, gdy klasa zostanie zainicjowana, możesz odwołać się do stanu lokalnego w celu uzyskania wartości i ustawić stan lokalny, odwołać się do funkcji lokalnych i przekazać je do łańcucha:
class WrappedFoo extends StateWrapper {
constructor(...props) {
super(...props)
this.state = {foo: "bar"}
}
render = () => <div onClick={this.props.onClick||this.onClick}>{this.state.foo}</div>
onClick = () => this.setState({foo: "baz"})
}
Więc mój komponent najwyższego poziomu potrzebuje tylko konstruktora, aby ustawić każdą klasę na jej właściwość stanu najwyższego poziomu, proste renderowanie i wszelkie funkcje, które komunikują się między komponentami.
class TopComponent extends React.Component {
constructor(...props) {
super(...props)
this.foo = new WrappedFoo(
props => this.setState({
fooProps: props
})
)
this.foo2 = new WrappedFoo(
props => this.setState({
foo2Props: props
})
)
this.state = {
fooProps: this.foo.state,
foo2Props: this.foo.state,
}
}
render() {
return(
<div>
<this.foo.component onClick={this.onClickFoo} />
<this.foo2.component />
</div>
)
}
onClickFoo = () => this.foo2.setState({foo: "foo changed foo2!"})
}
Wydaje się, że do moich celów działa całkiem nieźle, pamiętaj, że nie możesz zmienić stanu właściwości przypisanych do opakowanych komponentów w komponencie najwyższego poziomu, ponieważ każdy opakowany komponent śledzi swój własny stan, ale aktualizuje stan w górnym komponencie za każdym razem, gdy się zmienia.