Relay.RootContainer

Relay.RootContainer 是一个 React 组件，它会针对给定的 route 尝试去满足需要的数据来渲染 Component 的实例。

概述 #

Props

Props #

组件 #

Component: RelayContainer

必须是有效的 RelayContainer. Relay 将尝试在渲染之前满足其数据要求。

See also: 根容器 > 组件和路由

route #

route: RelayRoute

任何一个 Relay.Route 的实例，或一个对象需要 name、queries 和可选的 params 属性。

参阅: 根容器 > 组件和路由

forceFetch #

forceFetch: boolean

如果提供并设置为true，将始终对服务器进行数据请求，而不管客户端的数据是否可用于立即满足数据要求。

参阅: 根容器 > 强制获取

renderLoading #

renderLoading(): ?ReactElement

当数据需求还没被满足时，会调用 renderLoading 来渲染视图。如果它回传 undefined，它会呈现先前被 呈现 的 view （或如果先前没有呈现的话不呈现任何东西）。

示例 #

<Relay.RootContainer
  Component={ProfilePicture}
  route={profileRoute}
  renderLoading={function() {
    return <div>Loading...</div>;
  }}
/>

参阅: 根容器 > renderLoading

renderFetched #

renderFetched(
  data: {[propName: string]: $RelayData},
  readyState: {stale: boolean}
): ?ReactElement

当所有数据需求被满足时，会调用 renderFetched 来 渲染视图。在渲染被提供的 Container 时，这个 回调 应该会把 data 传给它。

示例 #

<Relay.RootContainer
  Component={ProfilePicture}
  route={profileRoute}
  renderFetched={function(data) {
    return (
      <ScrollView>
        <ProfilePicture {...data} />
      </ScrollView>
    );
  }}
/>

参阅: 根容器 > renderFetched

renderFailure #

renderFailure(error: Error, retry: Function): ?ReactElement

当数据要求不能满足时，renderFailure 被调用来呈现视图。

示例 #

<Relay.RootContainer
  Component={ProfilePicture}
  route={profileRoute}
  renderFailure={function(error, retry) {
    return (
      <div>
        <p>{error.message}</p>
        <p><button onClick={retry}>Retry?</button></p>
      </div>
    );
  }}
/>

参见: 根容器 > renderFailure

onReadyStateChange #

onReadyStateChange(
  readyState: {
    aborted: boolean;
    done: boolean;
    error: ?Error;
    events: Array<ReadyStateEvent>;
    ready: boolean;
    stale: boolean;
  }
): void

这个 callback prop 会在各种数据解析事件发生时被调用。

参阅: 准备状态