如何从中继容器数组中组合片段

Question

我正在将即时通讯功能构建到我的项目中。该项目使用 React 和 Relay。即时通讯功能类似于Facebook聊天，您可以在其中看到要与之交谈的人员列表，然后单击一个人将打开一个聊天窗口以进行一对一的讨论。

在我的实现中，您可以与之聊天的用户列表与打开的聊天窗口列表分开。因此，用户列表实际上对这个问题并不重要。

关于打开聊天窗口的渲染，我的方法是创建一个父 React 组件/中继容器。这个父组件将跟踪用户打开了哪些聊天窗口，并将构建聊天窗口 React 组件数组并最终渲染它们。这个打开的聊天窗口列表是父 React 组件中的所有本地状态。

单个聊天窗口 React 组件/中继容器有一个从参数化字段查询的片段，其中参数是聊天窗口讨论的用户的 ID。因此，如果此聊天窗口用于与 Bob 讨论，它将是 Bob 的 ID。

考虑到这一切，这里有一个示例父组件实现...

class FloatingDiscussionPane extends React.Component {
  render() {
    return (
      <ul>
        {this.renderDiscussions()}
      </ul>
    );
  }
  renderDiscussions() {
    const {teamIds} = this.props;
    return teamIds.map(teamId => {
      return (
        <FloatingDiscussionPaneDiscussion
          teamId={teamId} />
      );
    });
  }
};
export default Relay.createContainer(FloatingDiscussionPane, {
  fragments: {
    session: () => Relay.QL`
      fragment on Session {
        ${/* how to get fragments from the array of discussion windows */}
      }
    `
  }
});

这将是聊天窗口的示例实现...

class FloatingDiscussionPaneDiscussion extends React.Component {
  render() {
    ...
  }
};
export default Relay.createContainer(FloatingDiscussionPaneDiscussion, {
  fragments: {
    session: () => Relay.QL`
      fragment on Session {
        messages: myDiscussionMessages(team: $teamId) {
          ...
        }
      }
    `
  }
});

如您所见，FloatingDiscussionPaneDiscussion容器有一个片段需要包含在父容器中，FloatingDiscussionPane .父组件 FloatingDiscussionPane 将有一个FloatingDiscussionPaneDiscussion数组，所有这些组件都需要在父片段中包含自己的片段。

我怎样才能做到这一点？

Answer 1

我会暂时假设您的模式是这样的团队有消息（复数字段，由GraphQLList支持）并且会话有团队。

窗格组件可以加载所有团队及其嵌套消息。

class FloatingDiscussionPane extends React.Component {
  render() {
    return (
      <ul>
        {this.renderDiscussions()}
      </ul>
    );
  }
  renderDiscussions() {
    const {session: {teams}} = this.props;
    return teams.map(({id, messages}) => {
      return (
        <li key={id}>
          <FloatingDiscussionPaneDiscussion messages={messages} />
        </li>
      );
    });
  }
};
export default Relay.createContainer(FloatingDiscussionPane, {
  fragments: {
    session: () => Relay.QL`
      fragment on Session {
        teams {
          id
          ${FloatingDiscussionPaneDiscussion.getFragment('team')}
        }
      }
    `,
  },
});

每个窗格都可以使用这些消息并显示它们：

class FloatingDiscussionPaneDiscussion extends React.Component {
  render() {
    const {team: {messages}} = this.props;
    return (
      <ul>
        {messages.map(({id, text, sender: {name: senderName}}) => 
          <li key={id}>{senderName}: {text}</li>
        )}
      </ul>
    );
  }
};
export default Relay.createContainer(FloatingDiscussionPaneDiscussion, {
  fragments: {
    team: () => Relay.QL`
      fragment on Team {
        messages {
          id
          recipient { name }
          sender { name }
          text
        }
      }
    `,
  },
});