css - 如何动态更改数组中显示的样式文本组件的属性？

Question

我有一个显示数组中数字的组件。我使用带样式的组件为这些数字设置样式。但是，我想这样做，如果数字低于或等于变量(填充:数字)，则更改颜色以使其看起来已填充。因此，如果填充 === 5，则填充 1-5 中的所有数字in. 这是我的代码:

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

export const LoyaltyStatus: React.FC<ILoyaltyStatusProps> = ({
  filled,
  orderCount,
  statusTier,
  points,
  ...props
}) => {
  const displayOrders = () =>
    orderCount.map((ORDERS) => (
      <OrderTextContainer>
        <OrderText>{ORDERS.orderNumber}</OrderText>
      </OrderTextContainer>
    ));
return (
    // eslint-disable-next-line react/jsx-props-no-spreading
    <Container {...props}>
      <InnerContainer>
        <MainContentContainer>
          <TitleText>{`Unlock ${statusTier} Status`}</TitleText>
          <SubText>{`Just order ${orderCount.length} 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>
  );
};

这是样式:

const OrderContainer = styled.View`
flex-direction: row;
flex-wrap: wrap;
flex-grow: 1;
padding: 10px;
justify-content: center;
background: ${({theme}) => theme.colors.background}};
`;

const OrderTextContainer = styled.View`
flex-direction: column;
flex-grow: 0;
flex-shrink: 1;
padding: 10px;
background: ${({theme}) => theme.colors.background}};
`;

const OrderText = styled(Text).attrs(() => ({
  type: TextTypes.H4,
}))`
  border: ${({theme}) => theme.colors.lightGreyBackground}};
  background: ${({theme}) => theme.colors.background}};
  color: ${({theme}) => theme.colors.text};
  text-align: center;
  padding-top: 5px;
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border-width: 3px;
`;

我正在使用故事书来填充数据，组件如下所示:picture of my component

这是我的故事书文件:

import {LoyaltyStatus} from '@molecules/LoyaltyStatus';
import {storiesOf} from '@storybook/react-native';
import React from 'react';

const dummy = [
  {id: 1},
  {id: 2},
  {id: 3},
  {id: 4},
  {id: 1},
  {id: 2},
  {id: 3},
  {id: 4},
  {id: 4},
];

storiesOf('Loyalty Status', module).add('Default', () => (
  <LoyaltyStatus
    statusTier="Gold"
    points={10}
    orderCount={dummy.map((order) => ({
      orderNumber: order.id,
    }))}
  />
));

基本上，我只需要填写前面的所有数字，包括已填写的变量，使它们在兑换时显示。有人知道如何在 React-native typescript 中做到这一点吗？

---

编辑:我最终找到了解决我的问题的方法，但是它是通过使用像图章一样的绝对位置在旧圆上覆盖一个新圆来完成的。

const displayOrders = () =>
    orderCount.map((ORDERS) => (
      <OrderTextContainer>
        <OrderText>{ORDERS.orderNumber}</OrderText>
        {ORDERS.orderNumber <= filled && (
          <FilledOrderText>STAMPED</FilledOrderText>
        )}
      </OrderTextContainer>
    ));

Answer 1

关于样式化组件的文档，我接下来会尝试做。

像这样更新你的函数来映射你的订单:

const displayOrders = () =>
    orderCount.map((ORDERS) => (
      <OrderTextContainer>
        <OrderText filled={ORDERS.orderNumber === filled}>
           {ORDERS.orderNumber}
        </OrderText>
      </OrderTextContainer>
    )); 

然后像这样更新你的样式:

const OrderText = styled(Text).attrs(() => ({
  type: TextTypes.H4,
}))`
  border: ${({theme}) => theme.colors.lightGreyBackground}};
  background: ${({filled}) => filled ? filledColor : regularColor}};
  color: ${({theme}) => theme.colors.text};
  text-align: center;
  padding-top: 5px;
  width: 35px;
  height: 35px;
  border-radius: 999px;
  border-width: 3px;
`;

但是我不知道你想改变什么风格，所以背景只是一个例子。

希望能帮到你。

P.S:这个解决方案没有 typescript ，所以一定要自己添加它:)