Open3

React の コンポジション vs 継承 ってPropsにもあるよねという話

例えば Library というコンポーネントを使ったりラップする Wrapper というコンポーネントを作るとき、LibraryのPropsを

type LibraryProps = {
  x: string;
};

としたとき、WrapperのPropsの型を

type Props = {
  a: string;
} & LibraryProps;

interface Props extends LibraryProps {
  a: string;
}

のように継承でPropsを作ってWrapper用のPropsとLibraryのPropsを同階層に混ぜてしまい、

const Wrapper: FC<Props> = (props) => <div><Library x={props.x}/></div>;

のように構成するのは拡張性が悪いと思う

より良い形はPropsもコンポジションにした

type Props = {
  a: string;
  libraryProps: LibraryProps;
}

const Wrapper: FC<Props> = (props) => <div><Library {...props.libraryProps}/></div>;

だと思う

ログインするとコメントできます