Compound Components pattern

13728 ワード
Compound Components pattern テキストリンク
Netflixクローン作成時に見つけたデザインパターンを紹介します.Compound Componentsモードです.
Cardにはサブアイテムとして関連する要素がたくさんあると仮定します.
// App.js
return (
  <Card classes="mr" key={id}>
    <CardBody>
      <CardImage src={image} alt={title} />
      <CardTitle>{title}</CardTitle>
      <CardText>{desc}</CardText>
      <CardButton>{ctaText}</CardButton>
    </CardBody>
  </Card>
);
では、まず別のフォルダに子供を作成し、インポートも個別に行います.しかし、これらをすべてCard素子に集中させるパターンがあります.
Component Componentモードです.
ではまずカードで見てみましょう
// Card.js
import {
  Container,
  Body,
  Title,
  Text,
  Image,
  Button,
} from './style/Card.style';

function Card({ children, ...restProps }) {
  return <Container {...restProps}>{children}</Container>;
}

Card.Body = function CardBody({ children, ...restProps }) {
  return <Body {...restProps}>{children}</Body>;
};

Card.Title = function CardTitle({ children, ...restProps }) {
  return <Title {...restProps}>{children}</Title>;
};

Card.Text = function CardText({ children, ...restProps }) {
  return <Text {...restProps}>{children}</Text>;
};

Card.Image = function CardImage({ src, alt, ...restProps }) {
  return <Image src={src} alt={alt} {...restProps} />;
};

Card.Button = function CardButton({ children, ...restProps }) {
  return <Button {...restProps}>{children}</Button>;
};

export default Card;
まずはカード.style.jsではstyled-componsesでstarted素子を作成する必要があります.その過程は明らかになっているので省略した.
カードもjsでCardコンポーネントを作成し、.(dot notation)でCardオブジェクト(jsxオブジェクト)内にpropを静的に追加します.そしてfunctionで戻ればいいです.
そしてカード/index.jsに戻って発表しよう
import Card from './Card';

export { Card };
次にアプリケーションで使用します.
// App.js
import { Card } from './components/card';
return (
  <Card classes="mr" key={id}>
    <Card.Body>
      <Card.Image src={image} alt={title} />
      <Card.Title>{title}</Card.Title>
      <Card.Text>{desc}</Card.Text>
      <Card.Button>{ctaText}</Card.Button>
    </Card.Body>
  </Card>
);
インポート時にcardフォルダにファイルが指定されていない場合は、自動的にインデックスされます.jsを指すので我慢!
このようにcompound componentモードを使用すると、Cardサブアイテムを追加する構成部品を1つずつ作成する必要がなくなり、可読性も向上します.
HDFSのファイル操作
シンプルなデザイン