javascript - 如何将函数从有状态组件传递到无状态组件？

Question

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

下面是无状态代码

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"]}
 />
);
};

在这个下面我的类方法启动，即有状态代码启动。

 class ProductListingPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      resources: [],
      isFeatureAvailable: false,
      loading: false,
      decimalPrecesion: "",
      filterList: [],
      productBucketList: [],
      open: false,
      rating: 1,
      companyGuid: null,
      showMobileFilter: false,
      dataEmpty: false

    };
  }
  handleDrawerOpen = () => {
    this.setState({ open: true });
  };
}

我想在 ProductCard 组件中传递 handleDrawerOpen 。您能帮忙看看如何做到这一点吗？

我可以通过在 class 中移动 const ProductsGridItem 来解决这个问题，但我的前辈不允许我这样做。我不知道为什么。两个代码都在同一个文件中。请帮忙。

编辑:在渲染中，无状态组件的使用如下

 <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"
                    />

在 Hitcomponents - itemComponent: ProductsGridItem 中，我正在使用 Searchkit ViewSwitcherHits

Answer 1

我假设 ProductListingPage 的 render (您尚未显示)使用 ProductsGridItem。在该位置，您将传递 this.handleOpen:

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

在 ProductsGridItem 中，您可以将其传递给 ProductsGrid:

return (
  <ProductCard
    handleOpen={props.handleOpen}
    YourOtherStuffHere
  />
);

<小时/>

一些样式规则建议不要在 JSX 中为子组件使用 props.。如果您的内部样式规则不允许这样做，您可以将 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"]}
    />
  );
};