tech-craft

イントロダクション

Astroでは親コンポーネントから子コンポーネントへ値を受け渡すことができます。これを利用することで、同じコンポーネントでも中のテキストの内容を変えたり、違うCSSのスタイルを適用できます。

親コンポーネントから子コンポーネントへの値の渡し方

値の受け渡しには、propsを使用します。propsは、コンポーネントに渡すプロパティのことで、子コンポーネントは、渡されたpropsを受け取ります。試しにcomponentsフォルダ内にButton.astroというコンポーネントを作成し、index.astroで読み込みます。

---

---
<div>
  <a href="#">ボタン</a>
</div>

<style>
  div {
    width: 120px;
    margin-top: 1em;
    text-align: center;
  }
  a {
    display: block;
    width: 100%;
    padding: 20px;
    border-radius: 30px;
    background-color: lightblue;
  }
</style>

Button.astro

---
import Head from "../components/Head.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
// Buttonコンポーネントをimportする
import Button from "../components/Button.astro";
---

<html lang="ja">
	<Head />
	<body>
		<Header />
		<main>
			<h1>Astro demo</h1>
			<p>Astroのデモページです。</p>
			<!-- Buttonコンポーネントを呼び出す -->
			<Button />
			<Button />
		</main>
		<Footer />
	</body>
</html>

index.astro

このような形で画面表示されるかと思いますので、importしたボタン要素をpropsを利用して変更してみましょう。

propsを利用した値の変更

propsを利用してボタンのテキストと遷移先を変更します。親コンポーネントであるindex.astro内でコンポーネント内に渡したいpropsを設定します。

---
import Head from "../components/Head.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Button from "../components/Button.astro";
---

<html lang="ja">
	<Head />
	<body>
		<Header />
		<main>
			<h1>Astro demo</h1>
			<p>Astroのデモページです。</p>
			<!-- Buttonコンポーネントにtextとhrefというpropsを渡します。 -->
			<Button text="about" href="/about"/>
			<Button text="contact" href="/contact"/>
		</main>
		<Footer />
	</body>
</html>

index.astro

Buttonコンポーネントでtextとhrefというpropをそれぞれ渡します。propsを受け渡す場合はこのように渡したいpropsと値を設定できます。ちなみに値を設定しない場合は真偽値を渡せます。

なので三項演算子を使ってこのようなこともできます。

---
import Head from "../components/Head.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Button from "../components/Button.astro";
---

<html lang="ja">
	<Head />
	<body>
		<Header />
		<main>
			<h1>Astro demo</h1>
			<p>Astroのデモページです。</p>
			<!-- 片方のButtonコンポーネントにprimaryのpropsを渡します。 -->
			<Button text="about" href="/about" primary />
			<Button text="contact" href="/contact"/>
		</main>
		<Footer />
	</body>
</html>

index.astro

---
const {text, href, primary}  = Astro.props
---
<div>
	<!-- コンポーネントからpropsでprimaryが渡ってきている場合はprimaryというclassが付与される -->
  {
    primary ? <a href=`${href}` class="primary">{text}</a> : <a href=`${href}`>{text}</a>
  }
</div>

<style>
  div {
    width: 120px;
    margin-top: 1em;
    text-align: center;
  }
  a {
    display: block;
    width: 100%;
    padding: 20px;
    border-radius: 30px;
    background-color: lightblue;
  }
  .primary {
    background-color: red;
  }
</style>

Button.astro

index.astroで上のボタンにだけprimaryというpropsを渡します。Button.astroでprimaryというクラスが付いた時だけ、background-colorを赤にするようstyleを追加しています。

上のButtonコンポーネントではprimaryのpropsが設定されているので、primaryがtrueになります。その為、三項演算子内の?から:までの記述が適用され、primaryというクラスが設定されます。
※三項演算子についてはこちら↓

条件 (三項) 演算子 - JavaScript | MDN

条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。条件に続いて疑問符 (?)、そして条件が真値であった場合に実行する式、コロン (:) が続き、条件が偽値であった場合に実行する式が最後に来ます。この演算子は、 if 文の代替としてよく用いられます。

https://developer.mozilla.org

まとめ

Astroで親コンポーネントから子コンポーネントへ値を受け渡す方法について説明しました。上で使用した例以外にもpropsをHead内などで使用することで、ページが変わった時にページのタイトルやmetaタグを変更したりできるので、何かと便利ですので、ぜひ試してみてください。

🛸Astroのコンポーネント間で値を受け渡しするpropsの解説

イントロダクション

親コンポーネントから子コンポーネントへの値の渡し方

propsを利用した値の変更

まとめ