Next.js 页面数据在组件中显示 - 完整代码示例

Next.js 页面数据在组件中显示 - 完整代码示例

本示例展示了如何在 Next.js 页面中获取数据，并将数据传递到组件中进行显示。代码包含页面组件 /pages/index.tsx 和组件 /components/InfoTotal.tsx。

/pages/index.tsx

import { Totals } from '../components/InfoTotal';

export default function Home() {
  const totalSites = 10;
  return (
    <div>
      <h1>Welcome to my website</h1>
      <Totals totalsites={totalSites} />
    </div>
  );
}

/components/InfoTotal.tsx

export function Totals({ totalsites }: { totalsites: number; }) {
  const totals = totalsites;
  console.log(`网站总：${totals}`); 
  return (
    <p>Total websites: {totals}</p>
  );
}

代码解析

1. 在 /pages/index.tsx 页面组件中，定义了一个 totalSites 变量，用来保存网站总数。
2. 使用 Totals 组件，并将 totalSites 作为属性传递给组件。
3. 在 /components/InfoTotal.tsx 组件中，接收 totalsites 属性，并将其赋值给 totals 变量。
4. 组件中使用 totals 变量显示网站总数。

总结

本示例展示了如何在 Next.js 中将页面数据传递到组件中，并在组件中进行显示。这种方法非常实用，可以将页面数据逻辑和组件渲染逻辑分离，提高代码的可维护性和可复用性。