Question

我正在尝试将属性传递给另一个组件。将数组作为this.props.videos传递会导致{ "videos": { "__dataID__": "client:5610611954", "__fragments__": { "2::client": "client:5610611954" } } }成为空对象：

VideoList

（GraphQL会返回React Chrome扩展程序确认的正确数据，但它不会被传递到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> ) } }。）

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

容器/ channel_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')}
            }
          }
        }
      }`
  },
});

容器/ video_list.js

count

我做错了什么？我误解了Relay是如何工作的吗？我希望能够在VideoList中设置VideoList中继变量以用于分页目的。 braintree.setup($scope.serverToken, "dropin", { container: "dropin-container", onPaymentMethodReceived: function (response) { $scope.paymentToken = 'testing'; $scope.$apply(function () { $scope.paymentToken = response.nonce; console.log($scope.paymentToken); document.getElementById("myForm").submit(); // form is submitted, but no paymentToken is not set yet. }); } });对象将嵌套在多个其他组件中（例如频道，最受欢迎，用户的收藏等）。

谢谢！

Answer 1

您正试图直接使用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> ) } }中导出的版本。

像这样：

master

嵌套的React / Relay组件未接收道具

1 个答案: