gpt4 book ai didi

javascript - 嵌套的 React/Relay 组件没有收到 Prop

转载 作者:搜寻专家 更新时间:2023-11-01 04:14:46 24 4
gpt4 key购买 nike

我正在尝试将一个属性传递给另一个组件。将数组作为 <VideoList videos={this.props.channel.video_list}></VideoList> 传递结果 this.props.videos作为一个空对象:

{
"videos": {
"__dataID__": "client:5610611954",
"__fragments__": {
"2::client": "client:5610611954"
}
}
}

(GraphQL 返回由 React Chrome 扩展确认的正确数据,它只是没有被传递到 VideoList 中。)

components/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>
)
}
}

组件/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>


)
}
}

containers/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')}
}
}`
},
});

containers/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')}
}
}
}
}`
},
});

我做错了什么?我误解了 Relay 的工作原理吗?我希望能够设置 count VideoList 中的继电器变量用于分页目的。 VideoList对象将嵌套在多个其他组件中(例如 channel 、最受欢迎、用户的收藏夹等)

谢谢!

最佳答案

您试图直接使用 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>


)
}
}

关于javascript - 嵌套的 React/Relay 组件没有收到 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36658671/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com