Question

import React, { useState, createContext } from 'react';

interface Products {
  id: number;
  product: string;
  price: number;
  children?: any; //I belive I need to change this to something else
}

export const ProductsContext = React.createContext<Products[] | any>([]);

export const Productsprovider = (props: Products) => {
  // If I choose Props: To any it works

  const [products, setProducts] = useState<Products[]>([
    {
      id: 1,
      product: 'toothpaste',
      price: 50
    }
  ]);

  return <ProductsContext.Provider value={[products, setProducts]}>{props.children}</ProductsContext.Provider>;
};

export default Productsprovider;

Type '{ children: Element; }' is missing the following properties from type 'Products': id, product, price

如果我选择使用 Props: any 而不是它工作的界面 Products。

我肯定错过了一些东西，但我不知道它是什么..

App.js

<Productsprovider>
  <div>
    <Navbar />
    <ShoppingList />
  </div>
</Productsprovider>

Answer 1

改变：

export const Productsprovider = (props : Products) => {

致：

export const Productsprovider = ({children}: {children: ReactNode} ) => {

和

<ProductsContext.Provider value={[products,setProducts]}>
{children}
</ProductsContext.Provider>)

打字稿 useContext 中 props.children 的问题

1 个答案: