如何在 JSX (React) 中有条件地设置 Style 变量？

Question

我正在尝试有条件地设置图像的边框颜色。根据图像名称，我想设置不同的边框颜色。

这是我的代码：

<div className="row">
    {asideData.imageGallery2.map( (img, i) => {
        return(
              <div className="col-md-6 col-lg-4">
                   // if img.name includes "Quartz" then make border color red
                   // if img.name includes "Flake" then make border color blue
                  <img src={img.img} alt="" key={img.name} style={{border:"5px solid #555"}}/>
               </div>) 
               })}
               
</div>

Answer 1

在 border 属性的字符串中使用模板文字，这样您就可以使用条件运算符在两种可能性之间进行切换。

事先在一个单独的变量中定义边框，这样它就不会不可读了。

您没有使用索引参数，请随时将其删除。

asideData.imageGallery2.map((img) => {
    const border = `5px solid ${
        img.name.includes('Quartz')
        ? 'red'
        : img.name.includes('Flake')
            ? 'blue'
            : 'black' // default color
    }`;
    return (
        <div className="col-md-6 col-lg-4">
            <img src={img.img} alt="" key={img.name} style={{ border }} />
        </div>)
})

Answer 2

尝试

style={{border:"5px solid", borderColor: img.name.includes('Quartz') ? 'red' : (img.name.includes('Flake') ? 'blue' : null)}}/>

检查是否有效

如何在 JSX (React) 中有条件地设置 Style 变量？

How to conditionally set a Style variable in JSX (React)?

jsx

reactjs