2

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

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

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

{ users { userName, country, 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 中明确写入这些数据。（我的意思是没有上下文）

4

1 回答 1

0

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

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

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

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

而不是country listprop，只有 propcontinent从 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将特定的 prop 值传递this.props.continent.countryList.edges[index].node给 CountryComponent。

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

于 2016-04-08T08:00:00.607 回答