Question

我遇到这种情况：

TeamComponent.js：

....more code
  <WorkItemComponent workType="Beautiful">
  <WorkItemComponent workType="VeryBad">
....more code

WorkItemComponent.js：

import React, { Component } from "react";
import { graphql } from "react-apollo";
import { compose, withHandlers } from "recompose";
import MY_BEAUTIFUL_WORKTYPE_QUERY from "./MY_BEAUTIFUL_WORKTYPE_QUERY";
import MY_VERYBAD_WORKTYPE_QUERY from "./MY_VERYBAD_WORKTYPE_QUERY";
import AmazingComponent from "./AmazingComponent";

class WorkItemComponent extends Component {
  <AmazingComponent/>
}

export default compose(
  graphql(MY_BEAUTIFUL_WORKTYPE_QUERY), // <-- here I need to change this query
  choosing from [MY_BEAUTIFUL_WORKTYPE_QUERY, MY_VERYBAD_WORKTYPE_QUERY] based on "workType" prop in parent component "TeamComponent".
  withHandlers({
    ...
  })
)(WorkItemComponent);

我需要更改查询“MY_BEAUTIFUL_WORKTYPE_QUERY”，选择 MY_BEAUTIFUL_WORKTYPE_QUERY 或 MY_VERYBAD_WORKTYPE_QUERY 基于父组件“workType”中的“TeamComponent”道具。

但是如何？！

也许我必须重新考虑一切？

我哪里错了？

Answer 1

我认为你可以采取两种简单的方法：

1）执行两个查询...并在 WorkItemComponent中选择您想要的结果集。显然，这会有点浪费，因为您将运行一个您不需要的查询。

2）导出两个不同的组件。将它们包裹在选择的第3个组件中。示例代码：

dropSet = {tuple(elem) for elem in dropList} # Creates a multi-index on letter/colour. temp = df.set_index(['Letter', 'Color']) # Keep all elements of the index except those in droplist. temp = temp.loc[list(set(temp.index) - dropSet)] # Reset index to get the original column layout. df_dropped = temp.reset_index()

因此，组合两个不同的组件，并在渲染时切换它们。功能组件和重构使这个相当简单和优雅！

React Apollo GraphQL，许多查询，但需要重用一个组件

1 个答案: