javascript - 实例化后将 React key prop 设置为动态组件数组

Question

我有一个方法，它返回一个可以完全不同的组件数组:

renderComponents() {
  const children = [];
  children.push(this.renderComponent1());
  children.push(this.renderComponent2());
  if (something) {
    children.push(this.renderComponent3());
  }

  return children;
}

但是我当然得到了一个错误数组或迭代器中的每个子项都应该有一个唯一的“key”属性。。我尝试像这样设置 key :

children.forEach((child, i) => {
  Object.defineProperty(child.props, 'key', { value: i });
});

但事实证明，React 阻止了 props 的扩展，因此我收到了无法定义属性键，对象不可扩展。

所以我的下一个问题是:在实例化这些组件后，是否可以为数组中的每个组件设置 key prop？

UPD:接下来是真正的代码(它呈现一个分页，范围如下 [1]...[5][6][7][8][9]...[100]):

  renderPaginationButton(page) {
    const { query, currentPage } = this.props;

    return (
      <Link
        className={classNames(styles.link, { [styles.active]: page === currentPage })}
        to={routes.searchUrl({ ...query, page })}
      >
        {page}
      </Link>
    );
  }

  renderPaginationSeparator() {
    return (
      <div className={styles.separator}>...</div>
    );
  }

  renderPaginationRange(from, amount) {
    const { pagesCount } = this.props;
    const result = [];

    for (let i = Math.max(from, 1); i < Math.min(from + amount, pagesCount); i++) {
      result.push(this.renderPaginationButton(i));
    }

    return result;
  }

  renderPagination() {
    const { currentPage, pagesCount } = this.props;

    if (pagesCount <= 1) {
      return;
    }

    const children = this.renderPaginationRange(currentPage - 2, 5);

    if (currentPage > 4) {
      children.unshift(
        this.renderPaginationButton(1),
        this.renderPaginationSeparator()
      );
    }

    if (pagesCount - currentPage > 4) {
      children.push(
        this.renderPaginationSeparator(),
        this.renderPaginationButton(pagesCount)
      );
    }

    return (
      <div className={styles.pagination}>
        {children}
      </div>
    );
  }

Answer 1

要直接回答您的问题，您可以使用 React.cloneElement 将 props 添加到已经实例化的组件上。

但这不是您在这种情况下应该做的。

就您而言，您应该有 renderPaginationButton()返回 <Link>元素为 key= Prop 已经放入。