Next.js 中使用组件传递数据：在 /pages/index.tsx 中获取数据并在 /components/InfoTotal.tsx 中显示

这段代码展示了在 Next.js 项目中如何使用组件传递数据。代码中使用 JSX 语法调用了一个名为 'Totals' 的组件，并传递了一个名为 'totalsites' 的属性，其值为 'totalSites'。'totalSites' 是从 API 或其他数据源获取的，表示网站的总数。

在 'Totals' 组件内部，它会将传递进来的 'totalsites' 属性值存储在一个名为 'totals' 的变量中，并将其作为返回值返回。这样，'/components/InfoTotal.tsx' 组件就可以获取到 'Totals' 组件返回的数据，并将其展示在页面上。

代码示例如下：

export function Totals({ totalsites }: { totalsites: number; }) {
  const totals = totalsites;
  console.log(`网站总：${totals}`);
  return {
    totals,
  }
}

这段代码定义了一个名为 'Totals' 的函数组件，该组件接收一个名为 'totalsites' 的属性，该属性的类型为 number。组件内部将 'totalsites' 属性值存储在一个名为 'totals' 的变量中，并将其作为返回值返回。

在 '/components/InfoTotal.tsx' 中，可以这样使用 'Totals' 组件：

<Totals totalsites={totalSites} />

这段代码会将 'totalSites' 变量的值传递给 'Totals' 组件的 'totalsites' 属性。这样，'Totals' 组件就可以获取到 'totalSites' 变量的值，并将其展示在页面上。

通过这种方式，我们可以将数据从一个组件传递到另一个组件，实现数据共享和数据展示。