React组件传递TS对象数组作为Props的语法问题求助

问题描述 #

我在React组件中传递.ts文件中的对象数组作为Props时遇到语法问题。我有一个.ts文件导出了名为producte的对象数组，但我不想在组件中渲染整个数组，而是希望将单个产品信息作为Props传递（后续会有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;

producte定义 #

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.",
  },
];

解决方案 #

核心问题是你直接给数组对象producte访问title属性——producte是数组类型，本身没有title属性，必须先从数组中取出单个产品对象，再访问它的属性。

1. 直接通过数组索引获取单个产品 #

如果明确要取数组中的第一个产品（对应parf1），可以用索引[0]定位到对象，再传递需要的属性：

const parf1= () => {
  return (
    <>
      <NavBar />
      {/* 取数组第一个产品的title */}
      <ProductPage name={producte[0].title} />
    </>
  );
};

后续要传递parf2（对应数组第二个产品），只需改用producte[1].title即可。

2. 更灵活：按产品id查找（推荐） #

如果后续产品数量增多，或者数组顺序可能变化，按id查找更可靠，还能处理产品不存在的边界情况：

const parf1= () => {
  // 查找id为1的产品
  const targetProduct = producte.find(item => item.id === 1);
  
  if (!targetProduct) return <div>产品不存在</div>;

  return (
    <>
      <NavBar />
      <ProductPage name={targetProduct.title} />
    </>
  );
};

3. 传递整个产品对象（更高效） #

如果ProductPage组件需要用到产品的多个属性（比如price、description），直接传递整个对象会更简洁，不用逐个传递属性：

const parf1= () => {
  const targetProduct = producte.find(item => item.id === 1);
  if (!targetProduct) return <div>产品不存在</div>;

  return (
    <>
      <NavBar />
      {/* 传递整个产品对象 */}
      <ProductPage product={targetProduct} />
    </>
  );
};

对应的ProductPage组件可以这样接收Props：

// ProductPage.tsx
interface Product {
  id: number;
  title: string;
  price: number;
  description: string;
}

interface ProductPageProps {
  product: Product;
}

const ProductPage = ({ product }: ProductPageProps) => {
  return (
    <div>
      <h2>{product.title}</h2>
      <p>价格：{product.price}</p>
      <p>{product.description}</p>
    </div>
  );
};

export default ProductPage;

内容的提问来源于stack exchange，提问作者Piet