2021/09/12
はじめに
React の Props にデフォルト値を使いたい場合の書き方.
元のコード
NameView
というコンポーネントにname
という Props を与えたいとする.
base_code
import React from 'react';
interface NameProps {
name: string;
}
const NameView = ({ name }: NameProps): JSX.Element => {
return <div>name: {name}</div>;
};
const App = () => {
return (
<>
<NameView name="hoge" />
</>
);
};
export default App;
方法
デフォルト値を使う
interface
やtype
を使い,デフォルト値を使いたい場合は,Props を渡さない場合の動作をさせるため,?
を付けることで Props を任意にする.
with_default_value
import React from 'react';
interface NameProps {
name?: string;
}
- const NameView = ({ name }: NameProps): JSX.Element => {
+ const NameView = ({ name = 'anonymous' }: NameProps): JSX.Element => {
return <div>name: {name}</div>;
};
const App = () => {
return (
<>
<NameView />
<NameView name="hoge" />
</>
);
};
export default App;
使用時にエルビス演算子
使用時にエルビス演算子を使うという方法もある.
with_elvis_1
import React from 'react';
interface NameProps {
name?: string;
}
const NameView = ({ name }: NameProps): JSX.Element => {
- return <div>name: {name}</div>;
+ return <div>name: {name || 'anonymous'}</div>;
};
const App = () => {
return (
<>
<NameView />
<NameView name="hoge" />
</>
);
};
export default App;
コンポーネントの最初にエルビス演算子
with_elvis_2
import React from 'react';
interface NameProps {
name?: string;
}
- const NameView = ({ name }: NameProps): JSX.Element => {
+ const NameView = (props: NameProps): JSX.Element => {
+ const name = props.name || 'anonymous';
return <div>name: {name}</div>;
};
const App = () => {
return (
<>
<NameView />
<NameView name="hoge" />
</>
);
};
export default App;
おわりに
コードをキレイにするためにはデフォルト値を使ったほうが良いが,開発の段階ではエルビス演算子を使うのが便利だなと思った.