css React：如何有条件地设置下拉选项的样式？

bvjxkvbb 于 2023-05-23 发布在 React

关注(0)|答案(1)|浏览(102)

我试图改变className的选择对象的Map数组与另一个数组(this.props.notPressAble)。这是因为我希望数组中的一些对象有另一种CSS样式

handleOptions = () =>{
    let array = this.props.options.map((option, i) => 
    <a 
    key={i} 
    className={classes.dropdownoptions}>
    {option}</a>)

    for(let x = 0; x < this.props.options.length; x++)
    {
        if(this.props.notPressAble !== undefined)
        {
            for(let y = 0; y < this.props.notPressAble.length; y++)
            {
                if(x == this.props.notPressAble[y])
                {
                    array[x].props.className = classes.dropdownoptionsnotpressable
                }
            }
        }
    }

    return array
}

下面的代码是我实现类的地方，以便读者更好地理解我的问题

<SideBarContainers name="Planering" notPressAble={[0, 6, 11]}
 options={[
     "Aktiviteter:",
     "+ Ny Aktivitet",
     "Visa Alla Öppna",
     "Visa Försenat",
     "Visa Alla Stängda",
     "Visa Alla Kategoriserat",
     "Att göra:",
     "+ Ny Att göra",
     "Visa Alla Öppna",
     "Visa Alla Stängda",
     "Visa Alla Kategoriserat",
     "Personal planering:",
     "+ Ny post",
     "Visa Alla enkel"

联系我们
问题是array[x].props.className是一个不能改变的只读值。还有别的办法吗

css

来源：https://stackoverflow.com/questions/76305947/react-how-to-conditionally-style-dropdown-options

1条答案

按热度按时间

jm2pwxwz1#

为什么要使用for循环来循环选项，然后不使用PressAble。你可以只使用includes函数，然后决定应用哪个类。

handleOptions = () => {
    let array = this.props.options.map((option, i) => {
      const cls = this.props.notPressAble.includes(i) ? classes.dropdownoptionsnotpressable : classes.dropdownoptions
      return (
        <a key={i} className={cls}>
          {option}
        </a>
      )
    });

    return array;
  };

如果你仍然想使用你当前的代码，那么你需要克隆你想要改变的元素，然后像下面这样进行修改。

//array[x].props.className = classes.dropdownoptionsnotpressable
array[x] = React.cloneElement(array[x], {className: classes.dropdownoptionsnotpressable});

赞(0）回复(0）举报 2023-05-23

我来回答

css React：如何有条件地设置下拉选项的样式？

1条答案

相关问题

热门标签

最新问答