如何在 React js 中有条件地更改道具元素的样式（背景颜色）？

Question

我有一个父组件和子组件，用于使用 React 道具显示有关库存报告的一些内容。基本上，道具包含有关个人库存报告卡的信息，其中一个道具是一个标签，可以具有“每周”、“每月”或“每年”的价值。我想根据文本动态更改每个标签的背景。例如。如果 tag = "daily"，tag 元素的背景应该是黑色，如果 tag="monthly" 背景应该是红色，如果 tag=yearly，背景应该可以。请注意，我只想更改标签元素的背景，并且我有一个颜色 scss 文件，我在其中存储了不同的颜色变量，我想用它来完成上述更改。

卡片组件代码（子组件）

<>
            {props.details.map((value, index) => (
                <div className='report-container' key={index}>
                    <div className="report-header">
                        <h1>{value.title}</h1>
                        <p className="date">{value.creation_date}</p>
                    </div>
                    <div className="tag-container">
                        <span className="tag"> {value.tag} </span>
                    </div>
                    <div className="report-card-deets">
                        <p className="file-size"> {value.file_size} </p>
                        <button>Download</button>
                    </div>
                </div>
            ))}
            ;
        </>

我的数组包含将在卡片组件中填充的值

const ReportData = [
    {
        title: "Inventory Turnover report",
        creation_date: "31-03-2023",
        tag: "Daily",
        file_size: "100 kb",
    },
    {
        title: "Top ordered items report",
        creation_date: "28-03-2023",
        tag: "Yearly",
        file_size: "203 kb",
    },
    {
        title: "Stockout rate report",
        creation_date: "01-04-2023",
        tag: "Weekly",
        file_size: "400 mb",
    },
];

我的颜色变量

$primary-color: #1F8A70;
$secondary-color: #68B984;
$tertiary-color: #D6DCD8;
$text-color: #000000;
$text-color-light: white;
$background-color: #EDE4E0;
$container-background: #F2E9E5;
$table-background: #1F8A70;
$card-gradient: linear-gradient(285.25deg, #92C1A2 30.98%, rgba(107, 175, 109, 0.43) 77.71%);
$background-gradient: conic-gradient(from 126.2deg at 50% 50%, #1F8A70 0deg, rgba(76, 167, 124, 0.54) 178.12deg, rgba(103, 184, 132, 0.278471) 295.36deg, #1F8A70 360deg);

我已经尝试过内联调节，但不推荐这样做，因为我有 3 个条件而不是 2 个。另外，我想知道我是否能够使用 className 来做到这一点，但我现在还没有完全弄清楚。你会推荐什么？

Answer 1

您可以使用 styled-component 库从 html 标签创建组件。在您的情况下，此代码可以解决问题：

首先，您需要创建样式组件：

const DynamicBackground = styled.div`
  background-color: ${ props => 
                  props.tag === 'Daily' ? 'red' 
                  : props.tag === 'Yearly' ? 'blue'
                  : 'green'
              }
`

该组件可以接收标签属性并准备好在 CardComponent 中使用。它看起来像：

return (
    <>
      {props.details.map((value, index) => (
          ...
          <DynamicBackground tag={value.tag} />
          ...
      ))}
      ;
   </>
  )

Answer 2

将子组件代码更改为以下将修复 props 值不显示的问题：

<DynamicBackground className='tag' tag={value.tag} > {value.tag} </DynamicBackground>

Answer 3

如果你不想像@Alejandro 建议的那样使用 Styled 组件，你可以使用这种方法：

<>
{props.details.map((value, index) => (
    <div
        className='report-container'
        key={index}
        style={{
            backgroundColor: value.tag === 'Weekly' ? 'red' // you may use your preferred color hexadecimal instead (ex: #f00)
                : value.tag === 'Monthly' ? 'blue' // you may use your preferred color hexadecimal instead (#00f)
                    : 'green' // you may use your preferred color hexadecimal instead (#0f0)
        }}>
        <div className="report-header">
            <h1>{value.title}</h1>
            <p className="date">{value.creation_date}</p>
        </div>
        <div className="tag-container">
            <span className="tag"> {value.tag} </span>
        </div>
        <div className="report-card-deets">
            <p className="file-size"> {value.file_size} </p>
            <button>Download</button>
        </div>
    </div>
))}
</>

注意： 我假设

Weekly

、

Monthly

和

Yearly

是

value.tag

将保留的唯一值，如果它将保留任何其他值，例如 Daily，您需要将其添加到条件部分。