les états de l'interface et les accessoires dans les caractères dactylographiés réagissent

Je suis en train de travailler sur un projet qui utilise la machine ainsi que de réagir et je suis de nouveau à la fois. Mes questions à propos de l'interface en caractères d'imprimerie et comment cela se rapporte à des accessoires et des états. Ce qui se passe réellement? Mon application ne marche pas du tout, à moins que je déclare interface des accessoires et des etats, mais Im en utilisant les états de réagir par le biais de la fonction de constructeur et j'ai vu des exemples où cette information serait d'aller dans l'interface de MyProps " ou "interface MyStates" prenez ce code par 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 ce.état juste pour poster ici). Pourquoi ai-je besoin de l'interface? Quelle serait la bonne façon de le faire, car je crois que je suis en train de penser de cette dans le jsx, et non pas la cote de la tsx.

source d'informationauteur ceckenrode

  1. 20

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

    accessoires: les paires clé/valeur qui sont transmis de la mère du composant et le composant doit pas changer ses propres accessoires, seulement de réagir aux changements des accessoires du composant parent.

    de l'état: un peu comme accessoire, mais elles sont modifiées dans le composant lui-même à l'aide de la setState méthode.

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

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

    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, le MyState interface définit les champs qui sont utilisés plus tard dans le composant this.state membre (j'en ai fait toutes les chaînes, mais ils peuvent être tout ce que vous voulez).

    Je ne suis pas sûr de savoir si ou non ces domaines réellement besoin d'être en état, et non dans les accessoires, mais c'est à vous de décider.