如何在React-Native TypeScript组件中通过传入长度参数动态创建并填充数组

我明白你的需求——你现在想把组件的orderCount从传入完整数组改成只传一个数字，然后动态生成从1到该数字的数组来渲染。我来帮你把这个逻辑理顺，同时优化一下代码：

第一步：修改Props类型定义 #

首先得把组件的属性类型调整过来，把orderCount的类型从数组改成数字：

export interface ILoyaltyStatusProps {
 orderCount: number; // 这里从{ orderNumber: number; }[]改为number类型
 filled: number;
 statusTier: string;
 points: number;
}

第二步：实现动态生成数组的逻辑 #

你自己写的populateArray函数思路完全没问题，我这里给你一个更简洁的替代写法（用Array.from），当然你原来的循环写法也完全可用，看个人偏好：

// 生成从1到指定长度的数组
const populateArray = (length: number) => {
  return Array.from({ length }, (_, index) => index + 1);
};

接下来修改displayOrders函数，用这个生成的数组来做渲染，注意要给每个循环元素加上key（避免React警告）：

const displayOrders = () =>
  populateArray(orderCount).map((orderNumber) => (
    <OrderTextContainer key={orderNumber}>
      <OrderText>{orderNumber}</OrderText>
      {orderNumber <= filled && <CrownIcon />}
    </OrderTextContainer>
  ));

第三步：更新Storybook的传参 #

原来的Storybook里你是传数组，现在直接传数字就行，比如之前的dummy数组长度是9，就直接传orderCount={9}：

storiesOf('Loyalty Status', module).add('Default', () => (
 <LoyaltyStatus
   statusTier="Gold"
   points={10}
   orderCount={9} // 这里直接传数字即可
   filled={7}
 />
));

整合后的完整组件关键代码 #

把所有修改整合后，组件的核心部分是这样的：

export interface ILoyaltyStatusProps {
 orderCount: number;
 filled: number;
 statusTier: string;
 points: number;
}

export const LoyaltyStatus: React.FC<ILoyaltyStatusProps> = ({
 orderCount,
 filled,
 statusTier,
 points,
 ...props
}) => {
  // 生成从1到orderCount的数组
  const populateArray = (length: number) => {
    return Array.from({ length }, (_, index) => index + 1);
  };

  const displayOrders = () =>
    populateArray(orderCount).map((orderNumber) => (
      <OrderTextContainer key={orderNumber}>
        <OrderText>{orderNumber}</OrderText>
        {orderNumber <= filled && <CrownIcon />}
      </OrderTextContainer>
    ));

  return (
    <Container {...props}>
      <InnerContainer>
        <MainContentContainer>
          <TitleText>{`Unlock ${statusTier} Status`}</TitleText>
          <SubText>{`Just order ${orderCount} times this month.`}</SubText>
          <OrderContainer>{displayOrders()}</OrderContainer>
        </MainContentContainer>
        <FooterContentContainer>
          <PointsText>
            {`You'll earn ${points} points per dollar when you unlock ${statusTier} Status.`}
          </PointsText>
        </FooterContentContainer>
      </InnerContainer>
      <IconContainer>
        <LockIcon />
      </IconContainer>
    </Container>
  );
};

这样修改后，组件就只需要接收一个数字类型的orderCount，动态生成需要的数组，代码更简洁也更易维护，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Ibrahim Noor Mohammed