React Teslaサイトクローン-2

前の位置決め後に各部分に対して異なる内容を表示する方法.
プロをSectionタグに渡せばいいです.
私たちはまず移管するプロジェクトを制定します.

function Home() {
  return (
    <Container>
      <Section
        title="Model S"
        description="Order Online for Touchless Delivery"
        backgroundImg="model-s.jpg"
        leftBtnText="Custom Order"
        rightBtnText="Existing Inventory"
      />
      <Section />
      <Section />
    </Container>
  );

今はセレクションjsでは、テキストではなくパラメータにコンテンツを渡し、Junflopで埋め込みます.
その前に、clgでフロップをどんな人に渡すか見てみましょう.

こうして客体的に伝わっています.
これらを利用して書き直すと

function Section(props) {
  console.log(props);
  return (
    <Wrap>
      <ItemText>
        <h1>{props.title}</h1>
        <p>{props.description}</p>
      </ItemText>
      <Buttons>
        <ButtonGroup>
          <LeftButton>{props.leftBtnText}</LeftButton>
          <RightButton>{props.rigntBtnText}</RightButton>
        </ButtonGroup>
        <DownArrow src="/images/down-arrow.svg" />
      </Buttons>
    </Wrap>

ここでdestructor構文でpropsを記述する

function Section({title, description, leftBtnText, rigntBtnText}) {
  console.log(props);
  return (
    <Wrap>
      <ItemText>
        <h1>{title}</h1>
        <p>{description}</p>
      </ItemText>
      <Buttons>
        <ButtonGroup>
          <LeftButton>{leftBtnText}</LeftButton>
          <RightButton>{rigntBtnText}</RightButton>
        </ButtonGroup>
        <DownArrow src="/images/down-arrow.svg" />
      </Buttons>
    </Wrap>
  );
}

実際,今回のプロジェクトではdestructor構文を使用しない方がタイピング作業量は少ないが,大規模なプロジェクトを行う場合,これは別の話題となる.

以前と同様に、他の部分の変数も入力します.

YからXまで書きましたが、画像が変わらないという問題があります.これも同じです.まだいくつか補足が必要です.
以前のようにbackgroundImgをパラメータに渡し、トップレベルのWrap divラベルに渡すパラメータを受け入れます.

function Section({
  title,
  description,
  leftBtnText,
  rightBtnText,
  backgroundImg,
}) {
  return (
    <Wrap bgImage={backgroundImg}>
      <ItemText>

そしてstyledで

  background-image: ${(props) => `url("/images/${props.bgImage}")`};

propsからなるバックグラウンド画像パスを追加します.

各画面には背景画像に異なる写真が表示されます.
ホームページの構成の各セクションはすでに導入が完了しており、残りのセクションは次のリリースで説明します.