Relay.RootContainer 是一个 React 组件,它会针对给定的 route
尝试去满足需要的数据来渲染 Component
的实例。
Props
Component: RelayContainer
必须是有效的 RelayContainer
. Relay 将尝试在渲染之前满足其数据要求。
See also: 根容器 > 组件和路由
route: RelayRoute
任何一个 Relay.Route
的实例,或一个对象需要 name
、queries
和可选的 params
属性。
参阅: 根容器 > 组件和路由
forceFetch: boolean
如果提供并设置为true,将始终对服务器进行数据请求,而不管客户端的数据是否可用于立即满足数据要求。
参阅: 根容器 > 强制获取
renderLoading(): ?ReactElement
当数据需求还没被满足时,会调用 renderLoading
来渲染视图。如果它回传 undefined
,它会呈现先前被 呈现 的 view (或如果先前没有呈现的话不呈现任何东西)。
<Relay.RootContainer Component={ProfilePicture} route={profileRoute} renderLoading={function() { return <div>Loading...</div>; }} />
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> ); }} />
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> ); }} />
onReadyStateChange( readyState: { aborted: boolean; done: boolean; error: ?Error; events: Array<ReadyStateEvent>; ready: boolean; stale: boolean; } ): void
这个 callback prop 会在各种数据解析事件发生时被调用。
参阅: 准备状态