Состояния интерфейса и реквизит в машинописи реагируют

Я работаю над проектом, который использует машинопись, а также реагирует и является новым для обоих. Мои вопросы касаются интерфейса в машинописи и как это относится к реквизитам и состояниям. Что на самом деле происходит? Мое приложение не запускается вообще, если я не объявляю интерфейсные реквизиты и состояния, но я использую состояния через конструктор реагирования, и я видел примеры, когда вся эта информация поступала бы в "интерфейс MyProps" или "интерфейс MyStates", чтобы принять этот код для пример

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

(Я удалил содержимое в этом состоянии, просто чтобы опубликовать здесь). Зачем мне нужен интерфейс? Что было бы правильным способом сделать это, так как я думаю, что я думаю об этом с помощью JSX, а не TSX.

Источник

1 ответ

Решение

Непонятно, что именно вы спрашиваете, но:

props: являются парами ключ / значение, которые передаются от родительского компонента, и компонент не должен изменять свои собственные props, а только реагирует на изменения props из родительского компонента.

состояние: вроде как реквизит, но они изменяются в самом компоненте с помощью setState метод.

render Метод вызывается, когда реквизит или состояние изменились.

Что касается машинописной части, то React.Component принимает два типа в качестве обобщений, один для реквизита и один для состояния, ваш пример должен выглядеть примерно так:

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

Как видите, MyState Интерфейс определяет поля, которые позже используются в компоненте this.state член (я сделал их все строки, но они могут быть все, что вы хотите).

Я не уверен, действительно ли эти поля должны быть в состоянии, а не в реквизите, но вы должны это сделать.

Источник

1 - удалите ваш интерфейс, если вы не хотите. И объявляйте состояния в вашем классе
2 - класс изменения расширяется как показано ниже

Класс Root расширяет React.Component <{}, {}> {

.........

Источник
Другие вопросы по тегам