遍历符号数组

Question

我想问一下，是否有可能以某种方式迭代符号数组。 我有这个代码：

import React, { FunctionComponent, useState } from "react";

import { bemClassNames } from "@multiweb/reactUtils";

export type TabsProps = {
  children: any;
}

export const Tabs: FunctionComponent<TabsProps> = ({
  children
}) => {
  const classNames = bemClassNames("tabs-component");

  const tabs = children;

  const [activeTabIndex, setActiveTabIndex] = useState(0);

  const handleTabClick = (tabIndex: number) => {
    setActiveTabIndex(tabIndex === activeTabIndex ? activeTabIndex : tabIndex);
  }

  return (
    <div className={classNames()} role="tabpanel">
      <ul className={classNames("tabs-nav")}>
        {tabs.map((child: any, index: number) => {
          return React.cloneElement(child, {
            tabIndex: index,
            onClick: handleTabClick,
            isActive: index === activeTabIndex
          });
        })}
      </ul>
    </div>
  );
}

我收到此错误：TypeError: tabs.map is not a function。

所以我建议，我需要一些方法来迭代符号数组或将符号转换为字符串。 有人知道吗，怎么做？

非常感谢。

Answer 1

请使用 React.Children.map 进行迭代 见例子：

        <div>
        {React.Children.map(children, (child, i) => {          
          return child
        })}
      </div>

附：没有对符号数组进行迭代的特殊方法。您可以只使用 map、reduce、forEach ...