嵌套反應/繼電器組件不接收道具

Question

我試圖將屬性傳遞到另一個組件。傳遞數組作爲<VideoList videos={this.props.channel.video_list}></VideoList>導致this.props.videos是一個空對象：

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

（GraphQL返回由陣營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')} 
      } 
      } 
     } 
     }` 
    }, 
}); 

我在做什麼錯？我誤解了接力如何工作？我希望能夠在VideoList中設置count中繼變量以用於分頁目的。 VideoList對象將嵌套在多個其他組件中（例如，頻道，最受歡迎，用戶最喜歡的等等）

謝謝！

Answer 1

您正在嘗試直接使用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> 


    ) 
    } 
}