javascript - 嵌套的React/Relay组件不接收 Prop

我正在尝试将属性传递到另一个组件。将数组作为<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>
    )
  }
}

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

我究竟做错了什么？我是否误解了中继的工作方式？我希望能够为分页目的在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/