Question

我正在尝试将价值传递给道具道具。
这就是我要做的：

我创建界面：

interface CheckoutItem {
    id: string,
    name: string,
    img: string,
    unitPrice: number,
    amount: number,
}

我创建显示组件：

const CheckoutDisplay = (items: CheckoutItem[] ) => {
    return (
        <div>
            {items.map(item => (
                <p>
                    {item.name}
                </p>
            ))}
        </div>
    )
}

我创建了容器组件：

const Checkout = (items: CheckoutItem[], setAmount: any) => {
  return <CheckoutDisplay items={items} setAmount={setAmount} />;    
  // error here:    
  // Type '{ items: CheckoutItem[]; setAmount: any; }' is not assignable to type 
  // 'IntrinsicAttributes & CheckoutItem[]'.
  //  Property 'items' does not exist on type 'IntrinsicAttributes & CheckoutItem[]'.
};

const mapStateToProps = (state: any) => {
  return {
    items: state.items,
  };
};

const mapDispatchToProps = (dispatch: AppDispatch) => {
    return {
        setAmount: (id: number, amount: number) => dispatch(setItemAmount(id, amount)),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Checkout);

我的代码有什么问题？
谢谢！

Answer 1

道具作为对象传递给CheckoutDisplay，因此您需要对它们进行分解。

interface CheckoutDisplayProps {
  items: CheckoutItem[],
  setItemAmount: any,
}

const CheckoutDisplay: React.FunctionComponent<CheckoutDisplayProps> = ({ items, setItemAmount }) => {
    return (
        <div>
            {items.map(item => (
                <p>
                    {item.name}
                </p>
            ))}
        </div>
    )
}

TypeScript + React <-传递道具

1 个答案: