React のデフォルト値を持つオプションの小道具
- TypeScript のオプションの小道具
- TypeScript のデフォルト値を持つオプションの小道具
-
React の
defaultPropsプロパティを使用して、小道具のデフォルト値を設定する
React の小道具を使用すると、React のコンポーネントツリー全体を流れることができるさまざまなコンポーネント間でデータと引数を渡すことができます。さまざまなコンポーネントに渡される小道具は、TypeScript のように、プリミティブタイプまたはユーザー定義タイプとして定義された固定タイプを持つことができます。
このチュートリアルでは、React のオプションの小道具をデフォルト値で使用する方法を示します。
TypeScript のオプションの小道具
TypeScript では、? を使用してタイプまたは小道具をオプションにすることができます。オペレーター。この事実は、React でオプションのパラメーターを渡すために使用できます。
interface OptionalComponentProps {
color? : string;
title : string;
size? : number;
}
上記の例では、特定のコンポーネントの小道具のタイプ定義を含み、color および size 属性はオプションとして定義されています。
interface Props {
color? : string;
size: number;
title? : string;
}
function Card(props : Props){
const { color , size, title} = props;
return (
<div>
<div>{color}</div>
<div>{size}</div>
<div>{title}</div>
</div>
)
}
function App() {
return (
<div>
<Card size={20} title="Cool card" />
</div>
)
}
したがって、上記の例では、親コンポーネントは App であり、タイプ Props の小道具は Card コンポーネントに渡されます。color および title 属性は、? によってオプションとしてマークされています。
オプションの属性が小道具としてコンポーネントに渡されない場合、それは undefined として初期化されるため、表示もレンダリングもされません。
TypeScript のデフォルト値を持つオプションの小道具
上記の例は、コンポーネントで提供されるデフォルト値でも使用できます。
interface Props {
color? : string;
size: number;
title? : string;
}
function Card(props : Props){
const { color = 'red' , size, title = 'Default title'} = props;
return (
<div>
<div>{color}</div>
<div>{size}</div>
<div>{title}</div>
</div>
)
}
function App() {
return (
<div>
<Card size={20} title="Cool card" />
</div>
)
}
以前はデフォルト値がなかったため color 属性はレンダリングされませんでしたが、props として値が渡されないため、コンポーネントのレンダリングにデフォルト値が使用されます。ただし、title 属性のデフォルト値は使用されません。これは、コンポーネントに渡された小道具によって上書きされるためです。
React の defaultProps プロパティを使用して、小道具のデフォルト値を設定する
React は、defaultProps 属性を使用して渡された小道具にデフォルト値を割り当てることをサポートしています。デフォルト値は、コンポーネントのレンダリング中に直接割り当てて使用できます。
interface Props {
color? : string;
size: number;
title? : string;
}
const defaultProps : Props = {
color :"red",
size : 20,
title : "A cool title"
}
function Card(props : Props){
return (
<div>
<div>{props.color}</div>
<div>{props.size}</div>
<div>{props.title}</div>
</div>
)
}
Card.defaultProps = defaultProps;
function App() {
return (
<div>
<Card size={20} title="Cool card" />
</div>
)
}
