Modi per implementare il rendering condizionale in React

Feb 03 2023
Ecco alcuni modi per implementare il rendering condizionale in React:.
Foto di MedicAlert UK su Unsplash

Ecco alcuni modi per implementare il rendering condizionale in React:

  1. Utilizzando un'istruzione if-else all'interno del rendermetodo:
  2. render() {
      if (this.state.isLoading) {
        return <div>Loading...</div>;
      } else {
        return <div>Hello, World!</div>;
      }
    }
    

    render() {
      return this.state.isLoading ? <div>Loading...</div> : <div>Hello, World!</div>;
    }
    

    render() {
      return this.state.isLoading && <div>Loading...</div>;
    }
    

    renderContent() {
      if (this.state.isLoading) {
        return <div>Loading...</div>;
      }
      return <div>Hello, World!</div>;
    }
    
    render() {
      return <div>{this.renderContent()}</div>;
    }
    //
    getContent() {
      if (this.state.isLoading) {
        return <div>Loading...</div>;
      }
      return <div>Hello, World!</div>;
    }
    
    render() {
      const content = this.getContent();
      return <div>{content}</div>;
    }