在 ReactJS 中使用 Typescript 时无法传递任何 props

Question

我正在尝试将 AllProducts、MenProducts 等组件中的道具传递给 AddToCartButton 组件，以便我可以重用 AddToCartButton 组件。如果我尝试传递像

这样的道具

<AddToCartButton id={product.id} /> 

我收到错误：

输入 '{ id: 数字; }' 不可分配给类型“IntrinsicAttributes”。 类型“IntrinsicAttributes”上不存在属性“id”。ts(2322)

我也尝试过传递简单的字符串作为 prop，但它给了我同样的错误。

import { useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useAppSelector, useAppDispatch } from '../hooks/hooks'
import { fetchAllProducts } from '../store/features/allProducts/allProductsSlice'

import AddToCartButton from '../components/AddToCartButton'

export const AllProducts = () => {
  const product = useAppSelector(state => state.product);
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(fetchAllProducts())
  }, [dispatch])

  return (
    <div className="products-wrapper">
      <h1 className="products-wrapper__heading">
        All Products
      </h1>
      <div className="products-wrapper__products-cards-wrapper">
        {product.products.map(item => (
          <div key={item.id} className="product-card">
            <Link to={`/product/${item.id}`} className='products-wrapper__product-link'>
              <div className="product-card__img-wrapper">
                <img src={item.image} alt="product" className="product-card__product-img" />
              </div>
              <h3 className="product-card__product-name">
                {item.title}
              </h3>
              <h4 className="product-card__product-price">
                {item.price} €
              </h4>
            </Link>
            <AddToCartButton id={item.id}/>
          </div>
        ))}
      </div>
    </div>
   )
}

export default AllProducts

Answer 1

错误出现在 AddToCartButton 组件中。我没有在 AddToCartButton 组件中定义 prop 类型。谢谢大家的评论。

export interface IdProp {
  id: number
}

const AddToCartButton = ({id}: IdProp) => {
  const test = () => {
    console.log(id);

  }
  return (
    <button className="add-to-cart-btn" onClick={test}>
        Add To Cart
    </button>
  )
}

export default AddToCartButton

Answer 2

您遇到的错误与 TypeScript 以及您将 props 传递给 AddToCartButton 组件的方式有关。 TypeScript 似乎无法识别 AddToCartButton 组件中的 id 属性。

// 添加到购物车按钮.tsx

import React from 'react';

interface AddToCartButtonProps {
  id: number;
  // Other props if needed
}

const AddToCartButton: React.FC<AddToCartButtonProps> = ({ id }) => {
  // Your component logic here
  return (
    <button onClick={() => console.log(`Added to cart: ${id}`)}>Add to Cart</button>
  );
}

export default AddToCartButton;

在此示例中，我们定义了一个接口 AddToCartButtonProps 来指定 AddToCartButton 的预期道具类型。它包括一个数字类型的 id 属性。调整界面以包含您的 AddToCartButton 组件可能需要的任何其他道具。

在您的 AllProducts 组件中，确保正确导入并使用 AddToCartButton 组件：

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useAppSelector, useAppDispatch } from '../hooks/hooks';
import { fetchAllProducts } from '../store/features/allProducts/allProductsSlice';

import AddToCartButton from '../components/AddToCartButton';

export const AllProducts = () => {
  const product = useAppSelector(state => state.product);
  const dispatch = useAppDispatch();
  
  useEffect(() => {
    dispatch(fetchAllProducts());
  }, [dispatch]);

  return (
    <div className="products-wrapper">
      {/* ... your existing code */}
      {product.products.map(item => (
        <div key={item.id} className="product-card">
          <Link to={`/product/${item.id}`} className='products-wrapper__product-link'>
            {/* ... your existing code */}
          </Link>
          <AddToCartButton id={item.id} />
        </div>
      ))}
    </div>
  );
}