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 });
  };
}

我想传递handleDrawerOpen组件中的ProductCard。您能帮忙怎么做吗？

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

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

 <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

我假设FrameLayout的{{1}}（您未显示）使用ProductListingPage。在该位置，您将通过render：

ProductsGridItem

在this.handleOpen内，您会将其传递给<ProductsGridItem handleOpen={this.handleOpen} YourOtherStuffHere />：

ProductsGridItem

一些样式规则建议不要在JSX中为子组件使用ProductsGrid。如果您的内部风格规则说不这样做，则可以将return ( <ProductCard handleOpen={props.handleOpen} YourOtherStuffHere /> );放在最初解构的props.中：

handleOpen

如何将功能从有状态组件传递到无状态组件？

1 个答案: