Next.js 组件数据传递：从页面到组件显示网站总数

本示例演示了如何在 Next.js 应用中将页面数据传递给组件，并展示网站总数。通过Totals组件，从index.tsx页面获取totalsites数据，并在组件中显示。

完整代码内容：

/pages/index.tsx

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

export default function Home() {
  const totalSites = 10; // 假设有 10 个网站
  return (
    <div>
      <h1>网站信息</h1>
      <Totals totalsites={totalSites} />
    </div>
  )
}

/components/InfoTotal.tsx

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

代码解释

在index.tsx页面中，定义了一个名为totalSites的变量，并将其设置为10，代表网站总数。
使用Totals组件，将totalSites数据作为参数传递给组件。
在InfoTotal.tsx组件中，使用totalsites参数接收页面传递的数据，并将其赋值给totals变量。
在组件中，使用totals变量显示网站总数。

总结

本示例展示了如何在 Next.js 应用中使用 props 将页面数据传递给组件，并使用组件来展示数据。通过这种方式，可以将代码逻辑分离，提高代码可读性和可维护性。