Javascript 如何将函数从statefull传递到无状态组件？

我想将函数从有状态组件传递到无状态组件，下面是我的代码

下面是无状态代码

const ProductsGridItem = props => {
const { result } = props;
const source = result._source;  
return (
<ProductCard
  ProductName={source.productName}
  ProductGuid={source.productGuid}
  Key={source.productGuid}
  ProductStatus={source.status}
  DecimalPrecision={decimalValue}
  IsActive={source.isActive}
  Image={source.imageName}
  ProductCode={source.productCode}
  MinPrice={source.minPrice}
  Ratings={source.ratings}
  CurrencySymbol={source.currencySymbol}
  SupplierGuid={source.supplierGuid}
  Type="grid"
  ListBucketDetails={basketDetails}
  WishListDetails={wishListDetails}
  CompanyName={source.companyName}
  BuyingWindowStatus={source["buyingwindowstatus.raw"]}
  NewArrival={source["newarrival_raw.raw"]}
 />
);
};

我想在

ProductCard

组件中传递

handleDrawerOpen

。你能帮我怎么做吗

我可以通过在

类中移动
const products riditem
来解决此问题，但我的上级不允许我这样做。我不知道为什么。两个代码都在同一个文件中。请帮忙

编辑：
在render中，无状态组件使用如下所示

 <ViewSwitcherHits
                      hitsPerPage={16}
                      sourceFilter={[
                        "productName",
                        "productCode",
                        "imageName",
                        "manufacturerName",
                        "productGuid",
                        "tagAttributes",
                        "status",
                        "isActive",
                        "minPrice",
                        "ratings",
                        "currencySymbol",
                        "supplierGuid",
                        "companyName",
                        "buyingwindowstatus.raw",
                        "listproductsubcategory",
                        "newarrival_raw.raw"
                      ]}
                      hitComponents={[
                        {
                          key: "grid",
                          title: getLabelText(
                            resources.filter(x => {
                              return x.resourceKey === "grid";
                            })[0],
                            "Grid"
                          ),
                          itemComponent: ProductsGridItem,
                          InitialLoaderComponent: InitialLoaderComponent,
                          defaultOption: true
                        },
                        {
                          key: "list",
                          title: getLabelText(
                            resources.filter(x => {
                              return x.resourceKey === "list";
                            })[0],
                            "List"
                          ),
                          itemComponent: ProductsListItem,
                          InitialLoaderComponent: InitialLoaderComponent
                        }
                      ]}
                      scrollTo="body"
                    />

{
返回x.resourceKey==“网格”；
})[0],
“网格”
),
itemComponent:ProductsGridItem，
InitialLoader组件：InitialLoader组件，
defaultOption:true
},
{
键：“列表”，
标题：getLabelText(
resources.filter（x=>{
返回x.resourceKey==“列表”；
})[0],
“列表”
),
itemComponent:ProductsListItem，
InitialLoader组件：InitialLoader组件
}
]}
scrollTo=“body”
/>

在Hitcomponents-itemComponent:ProductsGridItem中，我使用的是
Searchkit ViewSwitcherHits
我假设
ProductListingPage
的
render
（您尚未显示）使用的是
ProductsGridItem
。在该位置，您将传递
this.handleOpen
：

<ProductsGridItem handleOpen={this.handleOpen} YourOtherStuffHere />


一些样式规则建议不要在JSX中为子组件使用
道具。
。如果您的内部风格规则要求不要这样做，您可以将
handleOpen
放入
props
的初始解构中：

const ProductsGridItem = props => {
  const { result: {_source: source}, handleOpen } = props;
  return (
    <ProductCard
      handleOpen={handleOpen}
      ProductName={source.productName}
      ProductGuid={source.productGuid}
      Key={source.productGuid}
      ProductStatus={source.status}
      DecimalPrecision={decimalValue}
      IsActive={source.isActive}
      Image={source.imageName}
      ProductCode={source.productCode}
      MinPrice={source.minPrice}
      Ratings={source.ratings}
      CurrencySymbol={source.currencySymbol}
      SupplierGuid={source.supplierGuid}
      Type="grid"
      ListBucketDetails={basketDetails}
      WishListDetails={wishListDetails}
      CompanyName={source.companyName}
      BuyingWindowStatus={source["buyingwindowstatus.raw"]}
      NewArrival={source["newarrival_raw.raw"]}
    />
  );
};

const productsGriItem=props=>{
const{result:{u source:source}，handleOpen}=props；
返回(
);
};
我假设
ProductListingPage
的
呈现
（您没有显示）使用
productsGriItem
。在该位置，您将传递
this.handleOpen
：

<ProductsGridItem handleOpen={this.handleOpen} YourOtherStuffHere />


一些样式规则建议不要在JSX中为子组件使用
道具。
。如果您的内部风格规则要求不要这样做，您可以将
handleOpen
放入
props
的初始解构中：

const ProductsGridItem = props => {
  const { result: {_source: source}, handleOpen } = props;
  return (
    <ProductCard
      handleOpen={handleOpen}
      ProductName={source.productName}
      ProductGuid={source.productGuid}
      Key={source.productGuid}
      ProductStatus={source.status}
      DecimalPrecision={decimalValue}
      IsActive={source.isActive}
      Image={source.imageName}
      ProductCode={source.productCode}
      MinPrice={source.minPrice}
      Ratings={source.ratings}
      CurrencySymbol={source.currencySymbol}
      SupplierGuid={source.supplierGuid}
      Type="grid"
      ListBucketDetails={basketDetails}
      WishListDetails={wishListDetails}
      CompanyName={source.companyName}
      BuyingWindowStatus={source["buyingwindowstatus.raw"]}
      NewArrival={source["newarrival_raw.raw"]}
    />
  );
};

const productsGriItem=props=>{
const{result:{u source:source}，handleOpen}=props；
返回(
);
};
您是否尝试过将其作为道具传递？是的。这个。道具。手绘笔。但是，当我控制台道具时，道具中没有手持绘图笔，这可能是因为上下文正在丢失。尝试使用绑定上下文传递您必须从父级传递它，在它的渲染函数中，您在其中渲染
ProductsGridItem
：
@Rajesh-它是一个箭头函数，不需要绑定。您是否尝试将其作为道具传递？是的。这个。道具。手绘笔。但是，当我控制台道具时，道具中没有手持绘图笔，这可能是因为上下文正在丢失。尝试使用binded Context传递。您必须从父级传递它，在它的呈现函数中呈现
ProductsGridItem
：
@Rajesh-这是一个箭头函数，不需要绑定。抱歉，我已经在ProductCard中传递了props.handleDraweropen。现在工作了。我检查了Productcard组件中的道具，其中函数handleOpen给出了undefinedIt。我将itemComponent:ProductsGriItem替换为itemComponent:并且它可以工作。非常感谢你的帮助。我以为没有<>itemComponent:ProductsGriItem，所以无法传递道具。很抱歉，我已经在ProductCard中传递了道具。handleDraweropen。现在工作了。我检查了Productcard组件中的道具，其中函数handleOpen给出了undefinedIt。我将itemComponent:ProductsGriItem替换为itemComponent:并且它可以工作。非常感谢你的帮助。我认为没有<>itemComponent:ProductsGriItem，因此无法传递道具。