クラスコンポーネントを使用したデフォルトの小道具
使い方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が、実際にはデフォルト値を提供するundefinedため、決してそうではありません。defaultProps関数パラメーターをオプションまたはデフォルト値でマークする方法と同様に考えてください。ただし、両方ではありませんが、どちらも呼び出しで値を指定する必要がないことを意味します。TypeScript 3.0+defaultPropsも同様の方法で処理します。これは、React ユーザーにとって非常にクールです!- には
defaultProps明示的な型注釈はありません。その型はコンパイラによって推測され、どの JSX 属性が必要かを判断するために使用されます。のサブセットと一致するdefaultProps: Pick<PageProps, "foo">ことを確認するために使用できます。この警告の詳細については、こちらで説明しています。defaultPropsPageProps
- これには
@types/reactバージョン16.4.11が正しく機能する必要があります。
TypeScript 2.1 から 3.0 まで
TypeScript 3.0 がコンパイラ サポートを実装する前defaultPropsは、まだそれを利用でき、実行時に React で 100% 動作しましたが、TypeScript は JSX 属性をチェックするときに props のみを考慮したため、デフォルトを持つ props を でオプションとしてマークする必要があり?ます。例：
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>
);
}
}
ご了承ください：
- props に対して型チェックを行うように で注釈を付けるのは良い考え
defaultPropsですが、すべての必須プロパティにデフォルト値を指定する必要はありません。必須プロパティはデフォルトを必要としないため、意味がありません。Partial<>
strictNullChecksの値を使用する場合は、 null 以外のアサーション (つまり) または型ガード (つまり) を削除する必要this.props.fooがあります。デフォルトの prop 値は実際には未定義にならないことを意味するため、これは面倒ですが、TS はこのフローを理解していませんでした。これが、TS 3.0 が の明示的なサポートを追加した主な理由の 1 つです。possibly undefinedthis.props.foo!if (this.props.foo) ...undefineddefaultProps
TypeScript 2.1 より前
これは同じように機能しますが、Partial型がないPartial<>ため、必要なすべての小道具のデフォルト値を省略して指定するか (それらのデフォルトは決して使用されません)、明示的な型注釈を完全に省略します。
defaultProps関数コンポーネントでも使用できますが、TypeScript が関数について認識できるように、( in before version ) インターフェイスにFunctionComponent関数StatelessComponentを@types/react入力する必要があります。16.7.2defaultProps
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！React は常に明示的に値を渡すため、関数コンポーネントで提供する場合、デフォルトのパラメーター値よりも優先されることに注意してください(したがって、パラメーターが未定義になることはなく、デフォルトのパラメーターは決して使用されません)。両方ではなく、どちらか一方。defaultPropsdefaultProps