如何将 prop 值传递给其他组件

Question

当用户点击卡片时，我希望“title”属性的值显示在工作风格页面的 H2 中。我以前处理过传递道具，但是我有点困惑，因为道具已经被赋值了。

带有可供选择的卡片的组件：

export default function TypeOfWorkPage() {

  return (
    <>
      <div className="user-header">
        <div className="user-header-wrap">
          <h1 className="greeting">Good evening</h1>
          <ProfileButton />
        </div>
      </div>

      <main>
        <div className="main-wrap">
          <section className="card-container">
            <h1>Choose your work style</h1>

            <div className="card-wrap">
              <Link to="/WorkPage">
                <Card
                  title="Short Task"
                  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue quam a semper accumsan."
                  background="#3ee18e"
                />
              </Link>
              <Link to="/WorkPage">
                <Card
                  title="Deep Work"
                  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue quam a semper accumsan."
                  background="#ee749d"
                />
              </Link>
              <Link to="/WorkPage">
                <Card
                  title="Pomodoro"
                  description="The technique uses a timer to break down work into intervals, traditionally 25 minutes in length,"
                  background="#e42537"
                />
              </Link>
            </div>
          </section>
        </div>
      </main>
    </>
  );
}

工作作风组件

export default function WorkPage() {
    return(
        <>
        <h2>Work Style</h2>
        </>
    )
}