web-dev-qa-db-fra.com

états d'interface et accessoires dans TypeScript réagissent

Je travaille sur un projet qui utilise TypeScript et réagit et je suis nouveau dans les deux. Mes questions portent sur l'interface dans TypeScript et sur la façon dont cela se rapporte aux accessoires et aux états. Que se passe-t-il réellement? Mon application ne fonctionne pas du tout, sauf si je déclare des accessoires et des états d'interface, mais j'utilise des états via la fonction de constructeur React et j'ai vu des exemples où toutes ces informations iraient dans 'interface MyProps' ou 'interface MyStates', prenez ce code pour Exemple

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

(J'ai supprimé le contenu de this.state juste pour poster ici). Pourquoi ai-je besoin d'une interface? Quelle serait la bonne façon de procéder, car je pense que je pense à cela de la manière jsx et non de la manière tsx.

reactjstypescriptjsxtsx
26
ceckenrode

Ce que vous demandez exactement n'est pas clair, mais:

accessoires: ce sont les paires clé/valeur qui sont transmises par le parent du composant et un composant ne doit pas modifier ses propres accessoires, mais uniquement réagir aux changements d'accessoires du composant parent.

état: un peu comme les accessoires mais ils sont modifiés dans le composant lui-même en utilisant la méthode setState.

la méthode render est appelée lorsque les accessoires ou l'état ont changé.

Quant à la partie TypeScript, le React.Component prend deux types de génériques, un pour les accessoires et un pour l'état, votre exemple devrait ressembler davantage à:

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

Comme vous pouvez le voir, l'interface MyState définit les champs qui seront ensuite utilisés dans le composant this.state membre (je leur ai fait toutes les chaînes, mais elles peuvent être ce que vous voulez).

Je ne sais pas si ces champs doivent réellement être en état et non en accessoires, mais c'est ce que vous appelez à faire.

28
Nitzan Tomer