reactjs - react - Estados de interfaz y props en escritura mecanografiada

react native jsx

Question

Estoy trabajando en un proyecto que usa mecanografía y reacción, y soy nuevo en ambos. Mis preguntas tienen que ver con la interfaz en mecanografía y cómo se relaciona con los objetos y los estados. ¿Qué está pasando realmente? Mi aplicación no se ejecuta en absoluto a menos que declare los apoyos y estados de la interfaz, pero estoy usando los estados a través de la función de constructor de reacción y he visto ejemplos en los que toda esa información iría a ''interfaz MyProps'' o ''interfaz MyStates''. ejemplo

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

(He eliminado el contenido de this.state solo para publicar aquí). ¿Por qué necesito interfaz? ¿Cuál sería la forma correcta de hacer esto, ya que creo que estoy pensando en esto de la manera jsx y no de la forma tsx?

Answer 1

1: elimine su interfaz si no lo desea. Y declare estados en su clase
2 - la clase de cambio se extiende como abajo

clase Raíz extiende React.Component <{}, {}> {

.........

Answer 2

No está claro lo que estás preguntando exactamente, pero:

props: son los pares clave / valor que se pasan desde el elemento primario del componente y un componente no debe cambiar sus propios accesorios, solo reacciona a los cambios de props del componente principal.

estado: algo así como accesorios, pero se modifican en el propio componente utilizando el método setState .

El método de render se llama cuando los props o el estado han cambiado.

En cuanto a la parte del manuscrito, el React.Component toma dos tipos como genéricos, uno para los accesorios y otro para el estado, su ejemplo debería verse más como:

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

Como puede ver, la interfaz de MyState define los campos que se usarán más adelante en el componente this.state member (los hice todas las cadenas, pero pueden ser lo que desee).

No estoy seguro de si esos campos realmente necesitan estar en estado y no en apoyos, pero eso es lo que debe hacer.