时间戳

首页 > 解决方案 > 如何动态更改显示在数组中的样式化文本组件的属性？

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

问题描述

我有一个显示数组中数字的组件。我用样式化的组件来设计这些数字。但是，我想这样做，如果数字小于或等于变量（填充：数字），则更改颜色以使其看起来已填充。因此，如果填充 === 5，则填充 1-5 中的所有数字在。这是我的代码：

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;
`;

我正在使用故事书来填充数据，组件看起来像这样：我的组件的图片

这是我的故事书文件：

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>
    ));

标签： csstypescriptreact-nativestyled-componentsstorybook

解决方案

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

更新你的函数来映射你的订单：

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;
`;

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

希望我能帮助你。

PS：这个解决方案没有打字稿所以一定要自己添加:)

推荐阅读