reactjs - 使用列表反应中继操作

Question

结构是

store: (Component) => Relay.QL`
  query StoreQuery {
    store { ${Component.getFragment('store')} },
  }
`,

store: () => Relay.QL`
  fragment on Store {
    activities {
      ${Activity.getFragment('activity')}
    },
  }
`,

activity: () => Relay.QL`
  fragment on Activity {
    name,
    icon,
    color
  }
`,

我将 props.activities 作为列表获取，然后我想操作此列表，例如排序或删除不需要等，但我看到有中继对象，无法理解如何获取数据并在设置为组件之前更改它？

Answer 1

从中继传递给每个组件的数据被屏蔽，因此即使另一个组件碰巧请求它，您也无法访问它。为了访问任何字段，您必须要求它。

比如说，外部组件想要根据name字段对活动进行排序。您需要将片段更新为以明确要求该组件中的名称。

fragment on Store {
  activities {
    name
    ${Activity.getFragment('activity')}
  },
}

好处是，即使内部片段name出于某种原因删除了该字段，外部组件仍将拥有数据。这是一个关键行为，可以在不了解完整应用程序的情况下在本地推理组件。