React TypeScript中如何仅传递product name属性给子组件

我有一个父组件DetailView，需要仅将Product类型中的product name属性作为props传递给Title子组件，这样子组件就不用自己遍历数据了。以下是当前的组件代码和Product类型接口定义：

当前组件代码 #

const DetailView = () => {
  const [products, setProducts] = useState<Product[]>([])

  return (
    <>
      {products.length > 0 ? (
        <>
          <Title products={ need to access product image here  } />
          <Header products={products} />
          <Grid container>
            <Grid item xs={12} sm={12} md={4} lg={4}>
              <ProductImage products={products} />
            </Grid>
            <Grid item xs={12} sm={12} md={8} lg={8}>
              <Results products={products} />
            </Grid>
          </Grid>
          <Grid container>
            <Chart />
          </Grid>
        </>
      ) : (
        'Loading...'
      )}
    </>
  )
}

Product类型接口 #

export interface Product {
  _id: string
  _index: string
  _score: number
  _shop: {
    alias: string
  }
  _similarity_percentage: number
  _source: {
    g_shop_name: string
    product_match_token: string
    product_last_data: {
      product_id: string
      product_url: string
      product_created_at: string
      product_images_list: string[]
      product_name: string
      product_price_currency: string
      product_price_description: string
      product_price_value: number
      product_prices_list: any[]
      category_name: string
      product_brand_name: string
      g_shop_name: string
      _type: string
    }
  }
}

你只需要在父组件中提前提取出所需的product_name属性，再传递给Title组件即可，具体分两种场景处理：

场景1：Title需要展示所有产品的名称 #

如果Title组件要用到所有产品的名称，直接用map从products数组中提取每个产品的product_name：

<Title productNames={products.map(p => p._source.product_last_data.product_name)} />

同时记得更新Title组件的props类型，让它接收字符串数组：

interface TitleProps {
  productNames: string[];
}

const Title = ({ productNames }: TitleProps) => {
  // 直接使用productNames数组，无需再遍历原products数据
  return <h1>{productNames.join(', ')}</h1>;
};

场景2：Title只需要单个产品的名称（比如第一个产品） #

如果只需要展示第一个产品的名称，直接取数组第一个元素对应的属性即可：

<Title productName={products[0]._source.product_last_data.product_name} />

对应的Title组件props类型改为：

interface TitleProps {
  productName: string;
}

const Title = ({ productName }: TitleProps) => {
  return <h1>{productName}</h1>;
};

修改后的完整DetailView代码（以传递所有产品名称为例） #

const DetailView = () => {
  const [products, setProducts] = useState<Product[]>([])

  return (
    <>
      {products.length > 0 ? (
        <>
          <Title productNames={products.map(p => p._source.product_last_data.product_name)} />
          <Header products={products} />
          <Grid container>
            <Grid item xs={12} sm={12} md={4} lg={4}>
              <ProductImage products={products} />
            </Grid>
            <Grid item xs={12} sm={12} md={8} lg={8}>
              <Results products={products} />
            </Grid>
          </Grid>
          <Grid container>
            <Chart />
          </Grid>
        </>
      ) : (
        'Loading...'
      )}
    </>
  )
}

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