使用 Next.js 14 新模板功能，如何将子级的数据传递到模板？

Question

目标：在 template.js 文件中有一个子标题部分，其中包含页面标题，当新的子项导航到类似以下内容时，该标题会更新：

模板.js

...
return(
<div>
  <div className="subheader">
    <h2>{data.title}</h2>
    <p>{data.description}</p>
  </div>
  <div>
    {children}
  </div>
</div>)

child1.js

const Child1 = () => {

  const data = [
    {
      title: "Child 1"
    },
    {
      description: "Im the first child but my parent doesn't know that, why does it hate me?"
    }
  ];

  return (
      <div>
        Im a child component so dont blame me if I do childish things.
      </div>

  );
}
 
export default Child1;

据我所知，作为一个组件而不是页面，我无法使用

getStaticProps

并且我不想通过 URL 传递数据。我一直在使用 useState 和 useEffect 但没有运气，所以关于我的父模板应该如何从其子模板获取数据有什么想法吗？

Answer 1

始终首先描述什么（！）您想要做什么（用例），而不是如何您想要做！

---

也就是说，React“向上传递数据”的方式是

useState

并将状态设置器作为 prop 传递。如果你无法传递道具，请使用

useContext

。

// Pseudo code not tested
import { useState } from 'react';

function ParentComponent() {
  const [data, setData] = useState('Some initial state');
  return (
    <div>
      <h1>{data}</h1>
      <ChildComponent stateSetter={setData} />
    </div>
  );
}

function ChildComponent({ stateSetter }: { stateSetter: (data: string) => void }){
  return (
    <button onClick={() => stateSetter('I come from a child component.')}>
      Click me
    </button>
  );
}

但我不认为，这才是你真正想要的。借助 Next 14 中的 App Router，您可以在 React 服务器组件、React 客户端组件中获取数据，并使用智能缓存策略进行传递。阅读有关这些可能性的更多信息。 Next.js 提供有用的指导和文档，包括优秀的教程。正确执行此操作对于成功构建 Next.js 14 站点至关重要。