[解決済み] ステートレスで機能的な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;
関連
-
[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?
-
[解決済み】ES6クラスベースのReactコンポーネントと機能的なES6 Reactコンポーネントの使い分けはいつ?
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
-
[解決済み] TypeScriptでReactのステートレス機能コンポーネントを使用して子供を使用する方法?
-
[解決済み] タイプスクリプト React: コンポーネントのプロパティタイプにアクセスする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法