如何在ReactJS中将Tinypaginator与fontawesome一起使用？

Question

我正在使用一个名为 TinyPagination（react-pagination-custom）的库，现在有两个问题：

首先，显然，Tinypagination在preKey和nextKey中接收到一个字符串，我需要在此处发送两个图标。问题不在于此，因为如果代码如下：

 <TinyPagination
          total={count}
          selectedPageId={selectedPageId}
          itemPerPage={itemPerPage}
          renderBtnNumber={this.renderBtnNumber}
          maxBtnNumbers={maxBtnNumbers}
          preKey="PREV"
          nextKey="NEXT"
          wrapClass="pageContainer"
          btnsClass="btnsContainer"
          maxBtnPerSide={2}
        />

效果很好。但是，当前调用该组件的代码如下：

 <TinyPagination
          total={count}
          selectedPageId={selectedPageId}
          itemPerPage={itemPerPage}
          renderBtnNumber={this.renderBtnNumber}
          maxBtnNumbers={maxBtnNumbers}
          preKey={
            <FontAwesomeIcon icon="angle-left" className={leftArrowPaginador} value="angle-left" />
          }
          nextKey={
            <FontAwesomeIcon
              icon="angle-right"
              className="angle-right"
              value="angle-right"
            />
          }
          wrapClass="pageContainer"
          btnsClass="btnsContainer"
          maxBtnPerSide={2}
        />

第一个问题出现在我给页面“后退” 和随后的“下一个” 页面时，因为出现了新的“ <” 按钮。 （当我分别发送“ PREV”和“ NEXT”时不会发生这种情况）

发生此问题时，退出控制台（chrome）中的消息是：

”警告：遇到两个具有相同密钥[object Object]的子代。密钥应该是唯一的，以便组件在更新期间保持其身份。非唯一密钥可能会导致子代重复和/或省略。 -该行为不受支持，并且可能在将来的版本中更改。”

我的原始代码：

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './style.css';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import { TinyPagination } from '../../../node_modules/react-pagination-custom';

const query = gql`
  query posts($first: Int) {
    posts(first: $first) {
      rows {
        id
        titulo
        image_intro
        category {
          id
        }
      }
      count
    }
  }
`;
let selectedArrow;
export class PaginatorScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { ...props };
    this.changePage = this.changePage.bind(this);
    this.renderBtnNumber = this.renderBtnNumber.bind(this);
    this.selectedPageId = props.selectedPageId;
  }

  changePage = id => {
    this.setState(prevState => ({ ...prevState, selectedPageId: id }));
  };

  buttonPageClick(id) {
    selectedArrow = id;
    if (typeof id.props !== 'undefined') {
      selectedArrow = id.props.value;
    }
    const { selectedPageId } = this.state;

    switch (selectedArrow) {
      case 'angle-left':
        this.changePage(selectedPageId - 1);
        break;
      case 'angle-right':
        this.changePage(selectedPageId + 1);
        break;
      default:
        this.changePage(id);
        break;
    }
  }

  renderBtnNumber(id) {
    const { selectedPageId } = this.state;
    return (
      <button
        type="button"
        onClick={this.buttonPageClick.bind(this, id)}
        key={id}
        className={`page ${selectedPageId === id ? 'selectedPage' : ''}`}>
        {id}
      </button>
    );
  }

  render() {
    const { selectedPageId } = this.state;
    const itemPerPage = 16;
    const maxBtnNumbers = 10;

    const { data } = this.props;
    if (data.loading) {
      return <div>Loading...</div>;
    }
    if (data.error) {
      return <div>{data.error.message}</div>;
    }

    if (data.posts.rows.length <= 0) {
      return <div>Nada que mostrar...</div>;
    }
    const {
      data: {
        posts: { count },
      },
    } = this.props;
    let listShow = [...data.posts.rows];
    listShow = listShow.splice((selectedPageId - 1) * itemPerPage, itemPerPage);
    let { leftArrowPaginador } = 'angle-left';

    leftArrowPaginador = selectedPageId === 1 ? 'angle-left-disabled' : 'angle-left';
    return (
      <div>
        {listShow.map(i => (
          <Link to={`/noticias/detalle/${i.category.id}/${i.id}/`} key={i.id}>
            <h3>{i.titulo}</h3>
            <img
              alt={i.titulo}
              src={process.env.REACT_APP_IMG_BASE + i.imagen_intro}
              width={500}
            />
          </Link>
        ))}
        <TinyPagination
          total={count}
          selectedPageId={selectedPageId}
          itemPerPage={itemPerPage}
          renderBtnNumber={this.renderBtnNumber}
          maxBtnNumbers={maxBtnNumbers}
          preKey={
            <FontAwesomeIcon icon="angle-left" className={leftArrowPaginador} value="angle-left" />
          }
          nextKey={
            <FontAwesomeIcon
              icon="angle-right"
              className="angle-right"
              value="angle-right"
            />
          }
          wrapClass="pageContainer"
          btnsClass="btnsContainer"
          counterStyle={{ color: 'gray' }}
          spreadClass="spread-container"
          spreadStyle={{ padding: '0 0px' }}
          maxBtnPerSide={2}
        />
      </div>
    );
  }
}

PaginatorScreen.propTypes = {
  selectedPageId: PropTypes.number,
  data: PropTypes.shape({
    loading: PropTypes.bool.isRequired,
    error: PropTypes.shape({ message: PropTypes.string }),
  }).isRequired,
};

PaginatorScreen.defaultProps = {
  selectedPageId: 2,
};

const queryOptions = {
  options: props => ({
    variables: {
      categoryId: props.categoryId,
      first: props.first,
    },
  }),
};

export default graphql(query, queryOptions)(PaginatorScreen);

我希望单击“上一步”和“下一步”时不存在此错误。我发现的问题显然是由于fontawesome和代码中存在的开关所致，因为正如我提到的，当我放置“ NEXT”和“ PREV”时，它们可以正常工作。

我想要的第二个结果是，当页面等于1时，我希望显示“ angle-left”图标，但className =“ angle-left-disabled”。

为此，我创建了以下变量，但是当我将其放入preKey时不起作用：

    leftArrowPaginador = selectedPageId === 1? 'angle-left-disabled': 'angle-left';

Answer 1

问题似乎出在您的renderBtnNumber函数中。当调用上一个/下一个按钮时，它将获取组件的“ id”。然后，它将其用作密钥。

要使其正常工作，您需要检查函数内部的“ id”是否为组件，如果是，请为key使用不同的值（例如“ Prev”或“ Next”） ）。