使用 .ts 对象作为道具答案

【问题标题】：use .ts object as props使用 .ts 对象作为道具
【发布时间】：2023-01-10 02:28:40
【问题描述】：

我在将一些对象信息作为我的组件的道具传递时遇到了一些语法问题。我得到了这个 .ts 文件，它带有一个名为 producte 的导出常量，它只是一个包含一些对象的数组，但我不想将它呈现在组件上，而是想将此信息用作道具（因为会有 parfum2、3 ...）我在这里错过了什么？

import React from "react";
import NavBar from "../src/NavBar";
import ProductPage from "../src/ProductPage";
import { producte } from "../data/producte";
    
const parf1= () => {
  return (
    <>
      <NavBar />
      <ProductPage name={producte.title} />
    </>
  );
};

export default parf1;

产品：

export const producte = [
  {
    id: 1,
    title: "Oceanic Pearl",
    price: 400,
    description:
      "Donec eleifend ligula et nisi pellentesque pharetra. Fusce vestibulum tortor sit amet lectus dignissim, in sodales augue semper. Sed tincidunt lorem ex, ut semper orci ornare odales. Vivamus nec ex in tortor aliquet dapibus eget in justo. Vivamus sollicitudin sapien eget dictum accumsan. Etiam pellentesque, justo ac tincidunt elementum, velit ex vulputate purus, ac luctus velit sem nec eros. Nam at nisl non lectus egestas cursus mollis sit amet nisl.",
  },
  {
    id: 2,
    title: "Montmartre's Pride",
    price: 420,
    description:
      "Vivamus sollicitudin sapien eget dictum accumsan. Etiam pellentesque, justo ac tincidunt elementum, velit ex vulputate purus, ac luctus velit sem nec eros. Nam at nisl non lectus egestas cursus mollis sit amet nisl. In tortor aliquet dapibus eget in justo.",
  },
];

【问题讨论】：

您在 JS 文件或 TS 文件中显示的代码...？
如果你console.log(producte)，你会得到什么？（或者在调试器中检查它，重要的部分是检查它的值）
这是一个 tsx 文件，如果我记录它，我会得到正确的值（我的对象信息）
首先 - 如果 parf1 打算用作 React 组件，则它应该以大写字母开头。其次显示 producte.ts 的代码。我假设这是您要导入的道具。

标签： javascript reactjs next

【解决方案1】：

要派生数组中其中一种产品的类型，您可以使用以下语法：

typeof producte[number]

这意味着：producte 数组中每个元素的 inferred 类型的 union。

这是一个更完整的示例，演示如何使用它：

TS Playground

import {type ReactElement} from 'react';

declare function ProductPage (props: { name: string }): ReactElement;

const producte = [
  {
    id: 1,
    title: "Oceanic Pearl",
    price: 400,
    description:
      "Donec eleifend ligula et nisi pellentesque pharetra. Fusce vestibulum tortor sit amet lectus dignissim, in sodales augue semper. Sed tincidunt lorem ex, ut semper orci ornare odales. Vivamus nec ex in tortor aliquet dapibus eget in justo. Vivamus sollicitudin sapien eget dictum accumsan. Etiam pellentesque, justo ac tincidunt elementum, velit ex vulputate purus, ac luctus velit sem nec eros. Nam at nisl non lectus egestas cursus mollis sit amet nisl.",
  },
  {
    id: 2,
    title: "Montmartre's Pride",
    price: 420,
    description:
      "Vivamus sollicitudin sapien eget dictum accumsan. Etiam pellentesque, justo ac tincidunt elementum, velit ex vulputate purus, ac luctus velit sem nec eros. Nam at nisl non lectus egestas cursus mollis sit amet nisl. In tortor aliquet dapibus eget in justo.",
  },
];

type Product = typeof producte[number];
    
const Parf1 = (props: { product: Product }): ReactElement => {
  return (
    <>
      {/* <NavBar /> */}
      <ProductPage name={props.product.title} />
    </>
  );
};

// Use: Map each product data to its own component:
producte.map(product => (<Parf1 product={product} />))

【讨论】：