英文:
React: How to conditionally style dropdown options?
问题
尝试使用以下代码解决这个问题：
handleOptions = () => {let array = this.props.options.map((option, i) => (<a key={i} className={`${classes.dropdownoptions} ${this.props.notPressAble.includes(i) ? classes.dropdownoptionsnotpressable : ''}`}>{option}</a>));return array;}
这个代码会检查 this.props.notPressAble 数组中的索引，如果索引在 notPressAble 中，就会为相应的元素添加 classes.dropdownoptionsnotpressable 类名。
英文:
Im trying to change the className of choosen objects in the mapped array with another array(this.props.notPressAble). This is because i want some of the objects in the array to have another css style
handleOptions = () =>{let array = this.props.options.map((option, i) =><akey={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}
The code below is where i implement the class for readers too get a better understanding of my problem
<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"
]} />
The problem im having is that array[x].props.className is a readOnly value that cant be changed. Is there another way of doing this?
答案1
得分: 0
You can translate the code-related portion as follows:
你为什么要使用 for 循环来遍历选项，然后判断是否不可点击？你可以直接使用 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.dropdownoptionsnotpressablearray[x] = React.cloneElement(array[x], { className: classes.dropdownoptionsnotpressable });
请注意，这只是代码的翻译，不包括问题的回答。
英文:
Why are you using for loops to loop over options and then notPressAble. You could just use includes function and decide which class to apply.
handleOptions = () => {let array = this.props.options.map((option, i) => {const cls = this.props.notPressAble.includes(i) ? classes.dropdownoptionsnotpressable : classes.dropdownoptionsreturn (<a key={i} className={cls}>{option}</a>)});return array;};
If you still want to go with your current code then you need to clone the element you want to change and then make the changes like below.
//array[x].props.className = classes.dropdownoptionsnotpressablearray[x] = React.cloneElement(array[x], {className: classes.dropdownoptionsnotpressable});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论