使用 React 將一個項目傳播到數組的開頭

Question

這個想法是將“Home”項添加到 renderBreadcrumbsList 數組的開頭。 問題是它以遞歸方式呈現，因此我並不真正關心這種機制。 想法？

當前代碼邏輯：

1. 遍歷對象的面包屑數組
2. 使用renderBreadcrumb()方法渲染每個面包屑

要求：

1. 再將一個renderBreadcrumb()項傳播到最終（映射）數組的開頭

// The following custom item should be spread to the array
renderBreadcrumb({ url, name }, i) {
  const { breadcrumbs } = this.props;
  const isDisabled = !url || breadcrumbs.length - 1 === i;

  return (
    <Breadcrumb
      name={ name }
      url={ url }
      index={ i }
      key={ i }
      isDisabled={ isDisabled }
    />
  );
}

// This should be added here
renderBreadcrumbList(breadcrumbs) {
  return breadcrumbs.map((_, i) => this.renderBreadcrumb(
  breadcrumbs[breadcrumbs.length - 1 - i], i
));
}

Answer 1

這個想法是將“Home”項添加到 renderBreadcrumbsList 數組的開頭。 問題是它以遞歸方式呈現，因此我並不真正關心這種機制。 想法？

當前代碼邏輯：

1. 遍歷對象的面包屑數組
2. 使用renderBreadcrumb()方法渲染每個面包屑

要求：

1. 再將一個renderBreadcrumb()項傳播到最終（映射）數組的開頭

// The following custom item should be spread to the array
renderBreadcrumb({ url, name }, i) {
  const { breadcrumbs } = this.props;
  const isDisabled = !url || breadcrumbs.length - 1 === i;

  return (
    <Breadcrumb
      name={ name }
      url={ url }
      index={ i }
      key={ i }
      isDisabled={ isDisabled }
    />
  );
}

// This should be added here
renderBreadcrumbList(breadcrumbs) {
  return breadcrumbs.map((_, i) => this.renderBreadcrumb(
  breadcrumbs[breadcrumbs.length - 1 - i], i
));
}