我有一個父組件，我只需要通過道具將product name 屬性傳遞到我的“標題”組件中，這樣我就不必在我的子組件中回圈資訊。
在這里，我有一張圖片來解釋我的問題
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...'
)}
</>
)
}
這是型別介面產品
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
}
}
}
uj5u.com熱心網友回復：
<Title products={products.map(p => p._source.product_last_data.product_name)} />
這將通過一個strings 陣列 :)
uj5u.com熱心網友回復：
也許這就是你要找的！首先，將Title組件道具型別更改為此
interface ITitleProps {
productsNames: string[],
}
那么您可以做的只是簡單地從您的產品中提取屬性。
// using state
const [productsNames, setProductsNames] = useState<string[]>([]);
useEffect(() => {
setProductsNames(products.map(p =>
p._source.product_last_data.product_name));
}, [products])
// pass to Title component
<Title productsNames={productsNames}>
// OR using re-rendering of react
// in your return statement
<Title productsNames={products.map((p) => p._source.product_last_data.product_name)}/>
希望這能解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/513835.html
標籤：反应打字稿