web-dev-qa-db-ja.com

TypeScriptのインターフェイス状態とプロップが反応する

私はTypeScriptを使用するプロジェクトに取り組んでいますが、反応するだけでなく、両方とも新しいです。私の質問は、TypeScriptのインターフェイスと、それが小道具と状態にどのように関係するかについてです。実際に何が起こっていますか？インターフェイスの小道具と状態を宣言しない限り、私のアプリケーションはまったく動作しませんが、反応コンストラクター関数を使用して状態を使用し、すべての情報が「interface MyProps」または「interface 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;

（ここに投稿するためにthis.stateのコンテンツを削除しました）。なぜインターフェイスが必要なのですか？私はこれをtsxの方法ではなくjsxの方法で考えていると思うので、これを行う正しい方法は何ですか？.

reactjstypescriptjsxtsx
26
ceckenrode

あなたが正確に何を求めているのかは明確ではありませんが、：

props：コンポーネントの親から渡されるキー/値のペアです。コンポーネントは自身のpropを変更せず、親コンポーネントからのpropの変更にのみ反応します。

state：ちょっと小道具に似ていますが、setStateメソッドを使用してコンポーネント自体で変更されます。

renderメソッドは、小道具または状態が変更されたときに呼び出されます。

TypeScriptパーツについては、React.Componentはジェネリックとして2つのタイプを取ります。1つは小道具用、もう1つは状態用です。例は次のようになります。

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メンバー（すべての文字列を作成しましたが、必要なものであれば何でもかまいません）。

これらのフィールドが実際に小道具ではなく状態にある必要があるかどうかはわかりませんが、それはあなたが作るように呼びかけています。

28
Nitzan Tomer