React+Typescript はインターフェイス ジェネリックスを使用してプロパティを処理します

さて、コンポーネントの話は終わったので、今回はデータ転送の仕組みを見てみましょう。

または上記の場合、たとえば、タイトルを Hello コンポーネントに渡したい場合は、タグ属性の形式で
直接

渡すことができます。

そして、サブコンポーネントでこのように使用します

が、エディターからは、この書き方はもう不可能であることがわかります。

次に、hello コンポーネントをこれに変更します

import * as React from "react";

interface IProps {
    
    
    title: string
}

export default class hello extends React.Component<IProps> {
    
    

    public constructor(props:any){
    
    
        super(props);
    }
    public render() {
    
    
        return (
            <div>{
    
     this.props.title }</div>
        )
    }
}

最大の違いは、 title という文字列型のフィールドを必要とするインターフェイス IProps を定義し
、それをジェネリック化のために React コンポーネントに掛けていることです。
この場合、これは親子コンポーネントとなり、エラーは報告されません。


もちろん、渡すことができます。複数のデータ

ここでは、子コンポーネントに年齢番号 20 を与え

、子コンポーネントの型を指定します。

ここでは、 Number を使用して、それが数値型であることを示します。次に、親コンポーネントを文字列に変更しようとします

。ここでエラーが報告されますが、これも強化できるTの意味です コード仕様と可読性

さて、最終的な親コンポーネントのコードは次のとおりです

import Hello from "./components/hello";

function App() {
    
    
  return (
    <div className="App">
        hello React Typescript
        <Hello title = "高阶组件" age = {
    
     20 } />
    </div>
  );
}

export default App;

サブコンポーネントコード

import * as React from "react";

interface IProps {
    
    
    title: string,
    age: number
}

export default class hello extends React.Component<IProps,any> {
    
    

    public constructor(props:any){
    
    
        super(props);
    }
    public render() {
    
    
        return (
            <div>
                <div>{
    
     this.props.title }</div>
                <div>{
    
     this.props.age }</div>
            </div>
        )
    }
}

その後、問題なくプロジェクトを実行します