クラスコンポーネントを持つデフォルトの小道具
使用static defaultPropsは正しいです。また、小道具と状態には、クラスではなくインターフェイスを使用する必要があります。
2018/12/1の更新：TypeScriptは、defaultProps経時的に関連する型チェックを改善しました。古い使用法や問題に至るまで、最新かつ最大の使用法について読みます。
TypeScript 3.0以降の場合
TypeScriptは、型チェックを期待どおりに機能させるためのサポートをdefaultProps具体的に追加しました。例：
interface PageProps {
foo: string;
bar: string;
}
export class PageComponent extends React.Component<PageProps, {}> {
public static defaultProps = {
foo: "default"
};
public render(): JSX.Element {
return (
<span>Hello, { this.props.foo.toUpperCase() }</span>
);
}
}
foo属性を渡さずにレンダリングおよびコンパイルできるもの：
<PageComponent bar={ "hello" } />
ご了承ください：
fooJSX属性として必須ではありませんが、オプションとしてマークされていません（つまりfoo?: string）。オプションとしてマークすることは、それがである可能性があることを意味しますが、デフォルト値を提供するためundefined、実際にはそうではありません。関数パラメーターをオプションとして、またはデフォルト値でマークする方法と似ていますが、両方ではありませんが、どちらも呼び出しで値を指定する必要がないことを意味します。TypeScript 3.0+は、同様の方法で扱います。これは、Reactユーザーにとって本当にクールです。undefineddefaultPropsdefaultProps- に
defaultPropsは明示的な型注釈はありません。そのタイプは推論され、どのJSX属性が必要かを決定するためにコンパイラーによって使用されます。を使用defaultProps: Pick<PageProps, "foo">してdefaultProps、のサブセットを確実に一致させることができますPageProps。この警告の詳細は、ここで説明されています。
- これが正しく機能するためには
@types/reactバージョン16.4.11が必要です。
TypeScript 2.1から3.0まで
TypeScript 3.0が実装される前のコンパイラサポートは、defaultProps引き続き使用でき、実行時にReactで100％動作しましたが、TypeScriptはJSX属性をチェックするときにプロップのみを考慮したため、デフォルトのオプションのプロップをでマークする必要があり?ます。例：
interface PageProps {
foo?: string;
bar: number;
}
export class PageComponent extends React.Component<PageProps, {}> {
public static defaultProps: Partial<PageProps> = {
foo: "default"
};
public render(): JSX.Element {
return (
<span>Hello, world</span>
);
}
}
ご了承ください：
- プロップに対して型チェック
defaultPropsするPartial<>ように注釈を付けるのは良い考えですが、すべての必須プロパティにデフォルト値を提供する必要はありません。必須プロパティはデフォルトを必要としないため、これは意味がありません。
- 使用している場合
strictNullChecksの値はthis.props.fooなりますpossibly undefinedと、非ヌルアサーション（すなわち必要this.props.foo!）またはタイプ・ガード（すなわちif (this.props.foo) ...削除する）をundefined。デフォルトのprop値が実際に未定義になることはないので、TSはこのフローを理解していなかったので、これは厄介です。これが、TS 3.0がの明示的なサポートを追加した主な理由の1つですdefaultProps。
TypeScript 2.1以前
これは同じように機能しPartialますが、タイプはありません。省略してPartial<>、必要なすべての小道具のデフォルト値を提供するか（これらのデフォルトが使用されない場合でも）、または明示的なタイプアノテーションを完全に省略します。
あなたは使用することができdefaultProps、同様の機能をコンポーネントに、しかし、あなたはにあなたの関数を入力する必要がFunctionComponent（StatelessComponentで@types/reactバージョンの前に16.7.2活字体が知っているように）インターフェイスdefaultProps機能に：
interface PageProps {
foo?: string;
bar: number;
}
const PageComponent: FunctionComponent<PageProps> = (props) => {
return (
<span>Hello, {props.foo}, {props.bar}</span>
);
};
PageComponent.defaultProps = {
foo: "default"
};
はTS 2.1以降ですでにパーシャルとして指定されているPartial<PageProps>ため、どこでも使用する必要はありませんFunctionComponent.defaultProps。
別の優れた代替策（これは私が使用する方法です）は、propsパラメーターを分解してデフォルト値を直接割り当てる方法です。
const PageComponent: FunctionComponent<PageProps> = ({foo = "default", bar}) => {
return (
<span>Hello, {foo}, {bar}</span>
);
};
その後、あなたはまったく必要ありませんdefaultProps！あなたがいる場合があるので注意してくださいん提供defaultProps常に明示的に渡します反応するので、機能部品にそれがデフォルトのパラメータ値よりも優先されますdefaultProps（パラメータは未定義されることはありませんので、このように、デフォルトのパラメータが使用されることはありません。）あなたが使用したいので値を両方ではなくどちらか一方。
static defaultProps正しい。そのコードを投稿できますか？