Was ist eine gute Vorgehensweise, um doppelte Funktionen in React.js mit dem Format 'this.setState' zu vermeiden?

Question

Ich habe den folgenden Code:

@autobind 
    setName(name){ 
    this.setState({name: name}); 
    } 

    @autobind 
    setLocation(location){ 
    this.setState({location: location}); 
    } 

    @autobind 
    setReference(reference){ 
    this.setState({reference: reference}); 
    } 

die Funktionen gelegt oben haben eine ähnliche Struktur zusammen, und ich würde gerne wissen, ob eine gute Praxis in React.js ist, um zu vermeiden, mich zu wiederholen anders einstellen Zustände.

Vielen Dank im Voraus.

Answer 1

könnten Sie eine Funktion machen, dass das Objekt als Wert annimmt, anstatt den Schlüsselwert und übergeben es an setState

setValue(object) { 
    this.setState(object) 
} 

und es verwenden möchte:

<div onClick={() => this.setValue({ reference })} /> 

aber dann können Sie Rufen Sie einfach setState direkt an.

<div onClick={() => this.setState({ reference })} /> 

So wirklich Sie eine dieser Funktionen nicht benötigen, weil setState ist, die funktionieren.

Diese verallgemeinerte setValue-Funktion könnte jedoch nützlich sein, wenn sie an Kinder übergeben wird.

<Child setParentState={this.setValue} /> 

und es verwenden,

<div onClick={() => this.props.setParentState({ reference })} /> 

Obwohl ich zugeben, ich habe noch nie so etwas getan. Scheint, Kindelementen zu viel Kontrolle zu geben, aber sparsam verwendet sollte in Ordnung sein.