인터페이스 상태 및 타이프스크립트의 소품 반응

인터페이스 상태 및 타이프스크립트의 소품 반응

저는 리액트뿐만 아니라 TypeScript를 사용하는 프로젝트를 진행하고 있으며, 둘 다 처음입니다.제 질문은 TypeScript의 인터페이스와 그것이 소품이나 상태와 어떻게 관련되어 있는지에 대한 것입니다.실제로 무슨 일이 일어나고 있나요?인터페이스 소품 및 상태를 선언하지 않는 한 응용 프로그램은 전혀 실행되지 않지만, 리액트 컨스트럭터 기능을 통해 상태를 사용하고 있으며, 이러한 모든 정보가 '인터페이스 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;

(여기 게시하기 위해 이 .상태의 콘텐츠를 삭제했습니다).인터페이스가 필요한 이유TSX 방식이 아닌 JSX 방식으로 생각하고 있기 때문에 올바른 방법은 무엇일까요?

정확히 무엇을 원하는지는 모르겠지만,

소품: 컴포넌트의 부모로부터 전달되는 키/값 쌍으로, 컴포넌트는 자신의 소품을 변경할 수 없습니다.부모 컴포넌트의 소품 변경에만 반응합니다.

상태: 소품과 비슷하지만 컴포넌트 자체에서 변경할 수 있습니다.setState방법.

그render소품이나 상태가 바뀌었을 때 메서드를 호출합니다.

타이프스크립트 부분에 대해서는React.Component범용 타입으로서 소품용 타입과 스테이트용 타입의 2종류가 있습니다.예시는 다음과 같습니다.

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

보다시피MyStateinterface는 나중에 컴포넌트에서 사용되는 필드를 정의합니다.this.statemember (모든 문자열을 만들었지만 원하는 문자열이 될 수 있습니다)

그 밭들이 실제로 소품들이 아니라 현 상태에 있어야 할지는 잘 모르겠지만, 당신이 만들어야 할 것은 그것입니다.

언급URL : https://stackoverflow.com/questions/36745013/interface-states-and-props-in-typescript-react