javascript - 使用扩展运算符调用函数

Question

有没有一种方法可以使用扩展运算符来缩短它，这样我就不必一遍又一遍地调用 createtab 函数。尤其是在我有更大更深的导航栏的情况下？

import React from "react";

function createTab(page, props) {
  return (<li className="nav-item">
  <a href={"#" + page} onClick={() => props.handlePageChange(page)} className={"nav-link" + (props.currentPage === page? " active" : "")}>
    {page}
  </a>
</li>)
};

function NavTabs(props) {
  return (
    <ul className="nav nav-tabs">
    {createTab("Home", props)}
    {createTab("About", props)}
    {createTab("Blog", props)}
    {createTab("Contact", props)}
    </ul>
  );
};

export default NavTabs;

Answer 1

您可以将数组中的所有页面发送给createTab

   function NavTabs(props) {
      return (
        <ul className="nav nav-tabs">
             {createTab(["Home", "About","Blog","Contact"]  , props)}
      </ul>
      );
  };

这里在 createTab 函数中使用 pages 数组并渲染 li 元素

  function createTab(pages, props) {
       return pages.map((page, index) => (
               <li key={"Key-"+index} className="nav-item">
                   <a href={"#" + page} onClick={() => props.handlePageChange(page)} className={"nav-link" + (props.currentPage === page? " active" : "")}>
                      {page}
                   </a>
              </li>))
          };