Ich verwende es6-Klassen, und am Ende hatte ich mehrere komplexe Objekte in meinem obersten Status und versuchte, meine Hauptkomponente modularer zu gestalten. Deshalb habe ich einen einfachen Klassen-Wrapper erstellt, um den Status in der obersten Komponente beizubehalten, aber mehr lokale Logik zuzulassen .
Die Wrapper-Klasse übernimmt eine Funktion als Konstruktor, die eine Eigenschaft für den Hauptkomponentenstatus festlegt.
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()
}
}
Dann erstelle ich für jede komplexe Eigenschaft im obersten Zustand eine StateWrapped-Klasse. Sie können die Standard-Requisiten hier im Konstruktor festlegen. Sie werden festgelegt, wenn die Klasse initialisiert wird. Sie können Werte auf den lokalen Status verweisen und den lokalen Status festlegen, auf lokale Funktionen verweisen und die Kette übergeben:
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"})
}
Dann benötigt meine Top-Level-Komponente nur den Konstruktor, um jede Klasse auf ihre Top-Level-Statuseigenschaft, ein einfaches Rendering und alle Funktionen zu setzen, die komponentenübergreifend kommunizieren.
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!"})
}
Scheint für meine Zwecke recht gut zu funktionieren, bedenken Sie jedoch, dass Sie den Status der Eigenschaften, die Sie umschlossenen Komponenten auf der obersten Komponente zuweisen, nicht ändern können, da jede umschlossene Komponente ihren eigenen Status verfolgt, aber den Status auf der obersten Komponente aktualisiert jedes Mal, wenn es sich ändert.