Interface States und Requisiten in Typoskript reagieren

Question

Ich arbeite an einem Projekt, das Typoskript verwendet sowie reagieren und neu für beide ist. Meine Fragen betreffen die Schnittstelle in Typoskript und wie diese sich auf Requisiten und Zustände bezieht. Was passiert eigentlich? Meine Anwendung läuft überhaupt nicht, es sei denn, ich deklariere Interface-Requisiten und Zustände, aber ich benutze Zustände durch die react-Konstruktor-Funktion und ich habe Beispiele gesehen, wo all diese Informationen in 'interface MyProps' oder 'interface MyStates' gehen würden Beispiel

"use strict"; 

import * as React from 'react' 
import NavBar from './components/navbar.tsx' 
import Jumbotron from './components/jumbotron.tsx'; 
import ContentPanel from './components/contentPanel.tsx'; 
import Footer from './components/footer.tsx'; 

interface MyProps {} 
interface MyState {} 
class Root extends React.Component <MyProps, MyState> { 
    constructor(props) { 
    super(props); 
    this.state = { 
     ///some stuff in here 

    }; 
    } 
    render() { 
    return (
     <div> 
     <NavBar/> 
     <Jumbotron content={this.state.hero}/> 
     <ContentPanel content={this.state.whatIs}/> 
     <ContentPanel content={this.state.aboutOne}/> 
     <ContentPanel content={this.state.aboutTwo}/> 
     <ContentPanel content={this.state.testimonial}/> 
     <Footer content={this.state.footer}/> 
     </div> 
    ) 
    } 
} 
export default Root; 

(ich den Inhalt in this.state gerade entfernt haben hier, um auf). Warum brauche ich eine Schnittstelle? Was wäre der richtige Weg, dies zu tun, da ich denke, dass ich auf die Art und Weise jsx denke und nicht die tsx-Art.

Answer 1

Es ist nicht klar, was Sie genau sind gefragt, aber:

Requisiten: sind die Schlüssel/Wert-Paare, die von der Mutter der Komponente übergeben werden und eine Komponente sollte seine eigene Requisiten nicht ändern, nur reagieren zu Änderungen von Requisiten von der Elternkomponente.

Zustand: ein bisschen wie Requisiten, aber sie sind in der Komponente selbst mit der setState Methode geändert.

Die Methode render wird aufgerufen, wenn sich die Requisiten oder der Status geändert haben.

Was das Typoskript Teil nimmt die React.Component zwei Typen als Generika, eine für die Requisiten und eine für den Zustand, Ihrem Beispiel aussehen sollte mehr:

interface MyProps {} 

interface MyState { 
    hero: string; 
    whatIs: string; 
    aboutOne: string; 
    aboutTwo: string; 
    testimonial: string; 
    footer: string; 
} 

class Root extends React.Component <MyProps, MyState> { 
    constructor(props) { 
     super(props); 

     this.state = { 
      // populate state fields according to props fields 
     }; 
    } 

    render() { 
     return (
      <div> 
       <NavBar/> 
       <Jumbotron content={ this.state.hero } /> 
       <ContentPanel content={ this.state.whatIs } /> 
       <ContentPanel content={ this.state.aboutOne } /> 
       <ContentPanel content={ this.state.aboutTwo } /> 
       <ContentPanel content={ this.state.testimonial } /> 
       <Footer content={ this.state.footer } /> 
      </div> 
     ) 
    } 
} 

Wie Sie sehen können, die MyState Schnittstelle definiert die Felder, die später in der Komponente this.state Mitglied verwendet werden (ich habe sie alle Zeichenketten, aber sie können alles sein, was Sie wollen).

Ich bin mir nicht sicher, ob diese Felder tatsächlich im Zustand sein müssen und nicht in Requisiten, aber das ist ein Ruf.