TypeScriptでオプションのpropsとdefaultPropsを使用してステートレスReactコンポーネントを作成しようとしています(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」が予想どおりにレンダリングされますが、「Mr McGee」を出力する必要がある場合、<Test />
は何も発生しません。
どんな助けも大歓迎です。
同様の質問と答えがあります: 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;