嵌套的React/Rerelay组件未接收道具
Nested React/Relay component not receiving props
我正试图将一个属性传递到另一个组件中。将数组作为<VideoList videos={this.props.channel.video_list}></VideoList>
传递会导致this.props.videos
为空对象:
{
"videos": {
"__dataID__": "client:5610611954",
"__fragments__": {
"2::client": "client:5610611954"
}
}
}
(GraphQL返回React Chrome扩展确认的正确数据,只是没有传递到VideoList
中。)
组件/video_list.js
import React from 'react'
import Relay from 'react-relay'
import VideoItem from '../containers/video_item'
export default class VideoList extends React.Component {
render() {
return(
<div>
{
this.props.videos.edges.map(video =>
<VideoItem key={video.id} video={video.node}/>
)
}
</div>
)
}
}
components/channel_list.js
import React from 'react'
import Relay from 'react-relay'
import VideoList from './video_list'
export default class ChannelView extends React.Component {
render() {
return(
<div>
<Column small={24}>
<h2>{this.props.channel.title}</h2>
</Column>
<VideoList videos={this.props.channel.video_list}></VideoList>
</div>
)
}
}
容器/channel_list.js
import React from 'react'
import Relay from 'react-relay'
import ChannelView from '../components/channel_view'
import VideoList from './video_list'
export default Relay.createContainer(ChannelView, {
fragments: {
channel: () => Relay.QL`
fragment on Channel {
title
video_list {
${VideoList.getFragment('videos')}
}
}`
},
});
容器/video_list.js
import React from 'react'
import Relay from 'react-relay'
import VideoList from '../components/video_list'
import VideoItem from './video_item'
export default Relay.createContainer(VideoList, {
initialVariables: {
count: 28
},
fragments: {
videos: () => Relay.QL`
fragment on Videos {
videos(first: $count) {
pageInfo {
hasPreviousPage
hasNextPage
}
edges {
node {
${VideoItem.getFragment('video')}
}
}
}
}`
},
});
我做错了什么?我是不是误解了接力的工作原理?我希望能够在VideoList
中设置count
中继变量用于分页。VideoList
对象将嵌套在多个其他组件中(例如,频道、最受欢迎的、用户的收藏夹等)
谢谢!
您试图直接使用VideoList
组件,而没有使用中继容器包装它,这是错误的。您需要使用VideoList
包装的版本,也就是您在./containers/video_list.js
中导出的版本。
像这样:
import React from 'react'
import Relay from 'react-relay'
import VideoList from '../containers/video_list'
export default class ChannelView extends React.Component {
render() {
return(
<div>
<Column small={24}>
<h2>{this.props.channel.title}</h2>
</Column>
<VideoList videos={this.props.channel.video_list}></VideoList>
</div>
)
}
}
相关文章:
- React重新渲染但未显示正确的组件
- React组件等待所需道具进行渲染
- 如何在react js中将值从一个组件发送到另一个组件
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- React组件-设置页面标题
- 为react组件传递道具的最佳方式
- react组件中的绑定方法
- 如何在react js中移动第二个组件
- 如何在react路由器的组件中使用参数
- React+Redux性能优化与组件ShouldUpdate
- React-将jSON数据传递给子组件的子组件
- React js更改状态不会更新组件
- 加载服务器端渲染的React组件后执行脚本
- React ClickDrag子组件回调
- 如何在渲染函数中检查 react 中子组件的状态
- 以最封装的方式封装/封装ScalaJS react js组件(react stick)
- bind():您正在将一个组件方法绑定到该组件.React会自动为您执行此操作
- 如何将值从父组件传递到子组件(react)
- 将函数从HOC传递到组件(React, React native)
- 根据屏幕大小以不同的顺序呈现组件(React)