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

Question

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

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

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

{ users { userName, country, countriesList } }

所以我看到的唯一方法是我需要在根目录下查询国家列表，并通过 props 手动将其传递给每个子组件？

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。

我们可以在高级组件ContinentComponent中指定高级属性continent，如下：

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

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

接下来，我们在CountryListComponent中指定必要的props：

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

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

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