Zenn
🔥

Astroチュートリアルメモ その4-1【レイアウトとslotとpropsと】

2022/11/05に公開
Astro
tech

Astroでのレイアウトについて。

https://docs.astro.build/en/tutorial/4-layouts/1/

レイアウトとして切り出すかどうかは人によると思うのだけど…。

普通にコンポーネントの1つとして作るのはReactと同じ。

Reactでいうところの{chirldren}と同じ機能が使える。propsの考え方も基本的には同じ。

ReactやNext.jsを使っている人にとってはお馴染みの形なので、そういう人はAstroもとっつきやすいだろうなと思う。

<slot />は{chirldren}

Astroでは、コンポーネントやページの中に<slot />と入れた場所が、Reactでいうところの{chirldren}になる。

チュートリアルでは以下のようなコンポーネントのレイアウトを作る。

src/layouts/BaseLayout.astro
---
const pageTitle = "Home Page";
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

これをページに反映する。

インポートするのもコンポーネントと同じ。

src/pages/index.astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout>
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

コンポーネント名のBaseLayoutでタグを作り、その中に書いた記述が<slot />として読み込まれる。

Reactコンポーネントの{chirldren}と同じ。

propsを渡す

propsもReactのように渡せる。

src/pages/index.astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Home Page";
---
<BaseLayout pageTitle={pageTitle}>
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

ページの中で、ページタイトルを定義して、BaseLayoutタグの中でpageTitle={pageTitle}として渡す。

渡された方では、const { pageTitle } = Astro.props;として受けて、html内で{pageTitle}として使える。

src/layouts/BaseLayout.astro
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
const pageTitle = "Home Page";
const { pageTitle } = Astro.props;
---

//抜粋
    <h1>{pageTitle}</h1>

次の記事

https://zenn.dev/k_neko3/articles/f855c03e3fbcc3

Discussion