1. ホーム
  2. javascript

[解決済み] ステートレスで機能的なReactコンポーネントのために、TypeScriptで(オプションの)デフォルトプロップを指定する方法とは?

2023-02-16 06:18:59

質問

オプションのpropsとdefaultPropsを持つステートレスReactコンポーネントをTypescriptで作成しようとしています(React Nativeプロジェクト向け)。これはvanilla JSでは些細なことですが、TypeScriptでそれを実現する方法については困っています。

以下のコードで。

import React, { Component } from 'react';
import { Text } from 'react-native';

interface TestProps {
    title?: string,
    name?: string
}

const defaultProps: TestProps = {
    title: 'Mr',
    name: 'McGee'
}

const Test = (props = defaultProps) => (
    <Text>
        {props.title} {props.name}
    </Text>
);

export default Test;

呼び出し <Test title="Sir" name="Lancelot" /> は期待通りに "Sir Lancelot" をレンダリングしますが <Test /> は何も出力されません。 と出力されます。

どんな助けでも大いに感謝します。

どのように解決するのですか?

同じような質問とその回答です。 React with TypeScript - ステートレス関数でdefaultPropsを定義する。

import React, { Component } from 'react';
import { Text } from 'react-native';

interface TestProps {
    title?: string,
    name?: string
}

const defaultProps: TestProps = {
    title: 'Mr',
    name: 'McGee'
}

const Test: React.SFC<TestProps> = (props) => (
    <Text>
        {props.title} {props.name}
    </Text>
);

Test.defaultProps = defaultProps;

export default Test;