react-Komponente - Eltern-Kind-Interaktion; Komponente Lebenszyklus

Question

Ich entwickle eine einfache Browser-App, um bestimmte Daten vom Benutzer zu erhalten. Ich habe mehrere Komponenten, um den Prozess des Sammelns dieser Daten zu vereinfachen, aber ich überlege derzeit, wie ich diese Komponente rendern kann.

Grundsätzlich habe ich meine Hauptkomponente, die Status verwendet, um zu verfolgen, welche Komponente zu rendern.

Ich mache das für fast alle meine Komponenten. Außerdem habe ich auch eine Funktion innerhalb der Elternkomponente, die ich über Requisiten an die Kindkomponente übergebe und die als Rückruf verwendet wird, um den Kindstatus an sein Elternelement zu übergeben, wenn diese Komponente nicht mehr nützlich ist.

class Main extends React.Component { 
    constructor(props){ 
    this.state = { 
     renderA: true, 
     renderB: false, 
     childState: null 
    } 
    } 

    collectState(state){ 
     this.setState({ 
     childState: state 
    }); 
    } 

    render() { 
    let content = null; 
    if(this.state.renderA === true){ 
     content = <ComponentA /> 
    } else { 
     content = <ComponentB /> 
    } 
    return(
     <div> 
     {content} 
     </div>); 
    } 
} 

So, das obige Beispiel verwendet wird, würde das Kind so etwas wie dieses

class ComponentA extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     stop: false, 
     usefullInfo: null 
    } 

    destroy() { 
     this.props.collectstate(this.state.usefullInfo) 
    } 

    render(){ 
    render something (like a Form) untill this.state.usefullInfo is set; 
    in that case, set this.state.stop true which will call destroy, passing the usefull information to parent 
    } 
} 

So sei es, diese Methode funktioniert für mich, aber ich kann deutlich sehen, dass die meisten wahrscheinlich nicht der richtige Weg ist mach das.

An dieser Stelle meine Frage lautet:

1) Wie kann ich eine Komponente stoppen Rendering ohne es mit einer Eigenschaft wie this.state.stop zu verfolgen zu haben?

2), wenn ich 2 verschiedene Komponenten machen möchten, wie in der Hauptkomponente, muss ich immer eine Rendera halten und renderB Eigenschaft auf Zustand, den einen oder anderen zu machen?

3) Gibt es eine bessere Möglichkeit, Informationen vom Kind zum Elternteil weiterzuleiten? Ich verwende derzeit eine Callback-Funktion über Requisiten von Eltern zu Kind, und ich rufe diesen Callback, wenn die Komponente ihren Zweck erfüllt hat

4) irgendwelche allgemeinen Vorschläge zur Verbesserung der Qualität des oben genannten Codes?

Vielen Dank für Sie Hilfe :)!

Answer 1

Ihr Beispiel funktioniert gut, aber in Reaktion empfiehlt es sich, Hub-Zustand bis, wenn Daten von mehreren Kindern Handling (source). Also würde ich empfehlen, den Zustand jedes Kindes im Elternteil zu behalten und Requisiten mit Werten und Handlern an die Kinder weiterzugeben.

Hier ist eine sample app können Sie überprüfen. Die Formularkomponenten behandeln den Fall, den Sie implementieren möchten.

Ihre Fragen zu beantworten:

1. Die übergeordnete Komponente entscheiden sollte, basierend auf seinem eigenen Zustand, ob eine untergeordnete Komponente oder nicht zu machen.
2. Es ist nicht erforderlich, Variablen im Status darüber zu halten, welche Komponente gerendert werden soll. das sollte in render() basierend auf dem Elternstatus berechnet werden
3. Ja, Rückruf sind die empfohlene Möglichkeit, Informationen an die Eltern zu übergeben
4. Code-Qualität sieht gut aus. Sie können jederzeit mit Werkzeugen wie hübschere oder ESlint gut tun.

Hier ist ein Beispiel:

class Main extends React.Component { 
    constructor(props) { 
    this.state = { 
     stateA: '', 
     stateB: '', 
    }; 
    } 

    handleStateChange(name, value) { 
    this.setState({ 
     [name]: value, 
    }); 
    } 

    render() { 
    const { stateA, stateB } = this.statel; 

    const shouldRenderA = !stateA; 

    if (shouldRenderA) { 
     return <ComponentA value={stateA} onChange={value => this.handleStateChange('stateA', value)} />; 
    } 
    return <ComponentB value={stateA} onChange={value => this.handleStateChange('stateB', value)} />; 
    } 
} 

class ComponentA extends React.Component { 
    render() { 
    const { value, onChange } = this.props; 

    return <input type="text" value="value" onChange={onChange} />; 
    } 
}