用列表反应中继操作

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 字段，外部组件仍然会有数据。这是一个关键行为，可以在不知道完整应用程序的情况下在本地推理组件。

用列表反应中继操作

React Relay manipulation with list

reactjs

relayjs