Question

我的React + Relay Classic应用程序中有一个收集容器和偏移分页容器。分页必须是可组合的，因为我可以有几个集合来使用这个分页容器。

我的父容器包含所有分页变量（在我的例子中是限制和偏移量），因为它们必须存在才能正确获取。因此，当我在下一页的分页容器中单击时，单击handler必须设置父容器的变量。

此时我正在使用变通方法并通过带有其他名称（parentRelayVariables和setParentVariables）的props将relay.variables和relay.setVariables发送到分页容器，并仍然寻求最佳解决方案。

class PostsPagination extends React.Component {
  static propTypes = {
    posts: PropTypes.shape({
      pageInfo: PropTypes.shape({
        hasNextPage: PropTypes.bool.isRequired,
      }).isRequired,
      totalCount: PropTypes.number.isRequired,
    }),
    setParentRelayVariables: PropTypes.func.isRequired,
    parentRelayVariables: PropTypes.shape({
      offset: PropTypes.number.isRequired,
    }).isRequired,
    left: PropTypes.bool.isRequired,
  };

  renderFirstPage(e) {
    e.preventDefault();
    this.props.setParentRelayVariables({ offset: 0 });
  }

  renderNextPage(e) {
    e.preventDefault();
    this.props.setParentRelayVariables({
      offset: this.props.parentRelayVariables.offset + 5,
    });
  }

  renderAnotherPage(e, page) {
    e.preventDefault();
    this.props.setParentRelayVariables({
      offset: (page - 1) * 5,
    });
  }

  render() {
    const currentPage = this.props.parentRelayVariables.offset
      ? (this.props.parentRelayVariables.offset / 5) + 1
      : 1;

    const totalPages = Math.ceil(this.props.posts.totalCount / 5);

    const pages = createPagesArray(currentPage, totalPages);

    return (<div className="row paginate">
      <ul>
        <li key="first">
          <a
            className={this.props.parentRelayVariables.offset ? '' : 'inactive'}
            href=""
            role="button"
            onClick={e => this.renderFirstPage(e)}
          >В начало</a>
        </li>
        {pages.map(page => <li key={page}>
          <a
            className={page === currentPage ? 'active' : ''}
            href=""
            role="button"
            onClick={e => this.renderAnotherPage(e, page)}
          >
            {page}
          </a>
        </li>)}
        <li key="last">
          <a
            href=""
            className={this.props.posts.pageInfo.hasNextPage ? '' : 'inactive'}
            role="button"
            onClick={e => this.renderNextPage(e)}
          >
            Далее
          </a>
        </li>
      </ul>
    </div>);
  }
}

export default Relay.createContainer(PostsPagination, {
  fragments: {
    posts: () => Relay.QL`
        fragment on PostConnection {
            pageInfo {
                hasNextPage,
            },
            totalCount
        },
    `,
  },
});

如何从子组件更改父props.relay.variables？

0 个答案: