Dynamische Render-Komponente basierend auf dem übergeordneten Status

Question

Meine übergeordnete Komponente, im Grunde ein Formular, hat ein Kind, ein Overlay mit einem Ladeprogramm, das nur basierend auf dem Status des übergeordneten Elements angezeigt werden muss.

import React from 'react'; 
import Overlay from './overlay'; 

export default class RegisterForm extends React.Component { 
    constructor { 
    this.state = { 
     loading: false 
    }; 
    } 
    handleSubmit(){ 
    this.state.loading = true; 
    ... 
    } 

    render(){ 
    return(
    <form onSubmit={() => this.handleSubmit()}> 
    ... 
    <Overlay /> 
    </form> 
    ); 
    } 
} 

Wie kann ich das erreichen?

Ich versuchte React.cloneElement(<Overlay />, {}) aber ich weiß nicht, wie dieses Kind zum Vater wieder anhängen und wie ich sie verstehe, es ist nicht das Reagieren-Weg, Dinge zu tun ...

Ich habe auch versucht eine Einstellung prop ob Overlay basierend auf state der Eltern, wie React.cloneElement(<Overlay />, { visible = this.state.loading }) aber kann nicht scheinen, um es an die Arbeit ...

Answer 1

nutzen Sie ternären Operator Komponente zu machen. Reagieren JSX unterstützt If-else Logik zum Rendern wie {(this.state.loading == false) ? <Overlay /> : null}

Sie sollten this.setState({loading: true}); verwenden, um den Status anstelle einer direkten Zuweisung zu ändern. Verwenden Sie auch event.preventDefault() in Ihrem handleSubmit();

import React from 'react'; 
import Overlay from './overlay'; 

export default class RegisterForm extends React.Component { 
    constructor { 
    this.state = { 
     loading: false 
    }; 
    } 
    handleSubmit(event){ 
    event.preventDefault(); 
    this.setState({loading: true}); 
    ... 
    } 

    render(){ 
    <form onSubmit {()=>{this.handleSubmit()}> 

    {(this.state.loading == false) ? <Overlay /> : null} 
    </form> 
    } 
} 

Answer 2

Ich würde den Ausdruck unten als ein ternärer Operator für den Fall in Frage

render() { 
    return (
    <form onSubmit={this.handleSubmit}> 
     { this.state.loading == false && <Overlay /> } 
    </form> 
); 
} 

bevorzugt Angemeldet keine Rückkehr Klausel in der Render-Funktion zu verpassen. Denken Sie daran, den Status nicht direkt durch Zuweisung zu ändern. Hier ist eine funktionierende Komponente, die das Formular durch Klicken auf eine Schaltfläche sendet und eine Ladenachricht anzeigt. Dies ist ein typischer React-Weg, um das Verhalten zu erreichen.

class HelloWidget extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this) 
    this.state = { 
     loading: false 
    }; 
    } 
    handleSubmit() { 
    this.setState({ loading: true }); 
    } 
    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     { this.state.loading && <div>loading...</div> } 
     <button>click</button> 
     </form> 
    ); 
    } 
} 

---

Anhang - Im Folgenden sind zwei Stenografien Tricks.

Ternary Betreiber:

Stenografie

render() { 
    return condition === someCondition ? <CompA /> : <CompB />; 
} 

Longhand

render() { 
    if (condition === someCondition) { 
    return <CompA />; 
    } else { 
    return <CompB />; 
    } 
} 

Boolesche Operator UND & &:

Stenografie

render() { 
    return condition === someCondition && <CompA />; 
} 

Longhand

render() { 
    if (condition === someCondition) { 
    return <CompA />; 
    } else { 
    return null; 
    } 
}