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

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

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

  return children;
}

当然，我得到了一个错误

数组或迭代器中的每个子元素都应该有一个唯一的“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（第页）{
const{query，currentPage}=this.props；
返回(
{page}
);
}
renderPaginationSeparator（）{
返回(
...
);
}
renderPaginationRange（从，金额）{
const{pagesunt}=this.props；
常量结果=[]；
for（让i=Math.max（from，1）；i4）{
推(
此.renderPaginationSeparator（），
此.renderPaginationButton（页面浏览）
);
}
返回(
{儿童}
);
}
要直接回答您的问题，您可以使用在已实例化的组件上添加道具

但在这种情况下你不应该这么做

在您的情况下，您应该使用
renderPaginationButton（）
返回一个
元素，其中
键=
道具已经放入。
我认为真正的解决方案是在renderComponent1、2和3上正确设置键。你也可以分享这些组件的代码吗？“应该”不是“必须”…@AndrewSteinheiser添加了一个真正的code@JonasWilms是的，但忽略它并不是一个解决方案。）是的，我重新思考了一个架构，将所有这些逻辑移到了一个单独的组件中，并在每个链接中明确添加了
key
prop。我只是想避免将一些关键参数传递给
renderSeparator
方法，但现在对我来说似乎没那么糟糕。）
  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>
    );
  }