Javascript typescript useContext中的props.children出现问题

更改：

导出常量产品Provider=（道具：产品）=>{

致：

export const Productsprovider=（{children}:{children:ReactNode}）=>{

及

{儿童}
)

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;

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

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