使用扩展运算符的调用函数

纳米网

有没有一种方法可以使用扩展运算符来缩短此时间，因此不必一遍又一遍地调用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;

赫马德里·达萨里（Hemadri Dasari）

您可以将数组中的所有页面发送到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>))
          };

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。