无法从父元素接收道具

Question

有一个父组件 Products 和另一个组件 SingleProduct

我试图将产品作为道具传递给 SingleProduct，但当我 console.log 时却未定义

谁能告诉我我做错了什么？

还尝试使用 UseState 传递道具，但仍然未定义。

谢谢

import data from "../data"

const Products = () => {
    const products = data;

    return (
        <div className='pt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3 '>
            {products.map((prod) => {
                return (
                    <Link to={`/product/${prod.id}`}>
                        <SingleProduct product={prod}></SingleProduct>
                    </Link>
                )
            })}
            <Link to='/home'></Link>
        </div>


    )
}

export default Products

const SingleProduct = ({ product }) => {
    console.log(product)

    return (
        <div>
            <figure className='px-4 pt-4'>
                <img
                    src={prod.image}
                    alt='Elf'
                    className='rounded-xl h-64 md:h-48 w-full object-cover'
                />
            </figure>
        </div>
    )
}

export default SingleProduct

应用程序.jsx

const router = createBrowserRouter([
  {
    path: '/',
    element: <Products></Products>,
  },
  {
    path: '/product/:id',
    element: <SingleProduct></SingleProduct>,
  },
])

function App() {

  return (
    <RouterProvider router={router}></RouterProvider>
  )
}

export default App

Answer 1

在 React 中将 props 传递给组件时，它们会通过组件参数中默认的

props

对象作为键：值对传递。要访问

product

的值，您应该这样做：

const SingleProduct = (props) => {
    console.log(props.product)
    ...
};