Question

使用relay传递数据字典的首选方法是什么，例如我在界面

UsersList = [
   {
     userName 
     // each user has select control
     CountrySelectControl {
         value = Country
         options = [All Countries List]
    }
]

阅读所有国家/地区列表的正确方法是什么？据我了解，像这样查询graphQl不是一个好主意

{ users { userName, country, countriesList } }

所以我看到我需要在root用户查询countriesList，并通过手动将其传递给每个子组件的唯一方法吗？

class Blabla extends Relay.Route {
  static queries = {
    users: (Component) => Relay.QL`
      query UsersQuery {
        users { ${Component.getFragment('user')} },
      }
    `,
    countriesList: (Component) => Relay.QL`
      query countriesListQuery {
        countriesList { ${Component.getFragment('countriesList')} },
      }
    `,
...
}

如果我有很多字典和一些更深层次的UI结构，这就变得很痛苦。

或者我可以以某种方式在树中更深层地传递根数据，而无需在props中明确地写入此数据。（我的意思是没有上下文）

Answer 1

是的，您可以在树中更深入地传递根数据，而无需将countryList明确地写为道具。

假设我们拥有一个大陆的数据以及属于它的国家。我们有嵌套的UI组件。例如，ContinentComponent包含CountryListComponent，需要一个国家/地区列表。 CountryListComponent由多个CountryComponent组成，需要状态列表。我们可以利用高级道具，而不是让ContinentComponent将国家/地区列表和状态列表一直传递到CountryListComponent和CountryComponent。

我们可以在高级组件continent中指定高级别道具ContinentComponent，如下所示：

export default Relay.createContainer(ContinentComponent, {
  fragments: {
    continent: () => Relay.QL`
      fragment on Continent {
        ${CountryListComponent.getFragment('continent')},
      }
    `,
  },
});

而不是country list prop，只有prop continent从ContinentComponent传递给CountryListComponent。

接下来，我们在CountryListComponent：

中指定必要的道具

export default Relay.createContainer(CountryListComponent, {
  fragments: {
    continent: () => Relay.QL`
      fragment on Continent {
        countryList(first: 100) {
          edges {
            node {
              id,
              name,
            },
            ${CountryComponent.getFragment('country')},
          },
        },
      }
    `,
  },
});

现在，CountryListComponent将特定道具值this.props.continent.countryList.edges[index].node传递给CountryComponent。

此用例是Relay.js的主要动机之一。

什么是使用中继传递数据字典的首选方法

1 个答案: