stany interfejsu i rekwizyty w maszynopisie reagują

Question

Pracuję nad projektem, który używa maszynopisu, jak również reaguje i jestem nowy w obu. Moje pytania dotyczą interfejsu w maszynopisie i tego, jak to się odnosi do rekwizytów i stanów. Co się właściwie dzieje? Moja aplikacja nie działa w ogóle, chyba że deklaruję rekwizyty i stany interfejsu, ale używam stanów przez funkcję konstruktora reagowania i widziałem przykłady, w których wszystkie te informacje trafiałyby do "interfejsu MyProps" lub "interfejsu MyStates". przykład:

"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; 

(Usunąłem zawartość tego pliku.state, aby opublikować tutaj). Dlaczego potrzebuję interfejsu? Jaki byłby właściwy sposób, aby to zrobić, ponieważ myślę, że myślę o tym w sposób jsx, a nie sposób tsx.

Answer 1

Nie jest jasne, co masz dokładnie pytać, ale:

rekwizyty: są pary klucz/wartość, które są przekazywane z rodziców składnika oraz składnik nie powinien zmieniać swoje własne rekwizyty, tylko reagować do zmian rekwizytów ze składnika macierzystego.

stan: trochę jak rekwizyty, ale są one zmieniane w samym komponencie przy użyciu metody setState.

Metoda render jest wywoływana, gdy rekwizyty lub stan uległy zmianie.

chodzi o część maszynopis, React.Component trwa dwa typy jak rodzajowych, po jednym dla podpór i jeden dla stanu, twój przykład powinien wyglądać bardziej jak:

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> 
     ) 
    } 
} 

Jak widać, interfejs MyState definiuje pola, które są później używane w składniku składnika this.state (zrobiłem je wszystkie ciągi, ale mogą być dowolne).

Nie jestem pewien, czy te pola rzeczywiście muszą być w stanie, a nie w rekwizytach, ale to do ciebie zadzwonić.