我試圖用另一個(gè)數(shù)組(this.props.notPressAble)更改映射數(shù)組中所選對(duì)象的類名。這是因?yàn)槲蚁M麛?shù)組中的一些對(duì)象具有另一種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
}
下面的代碼是我實(shí)現(xiàn)這個(gè)類的地方,以便讀者更好地理解我的問題
<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"
]}/& gt;
我遇到的問題是array[x].props.className是一個(gè)只讀值,不能更改。有沒有別的方法做這件事?
為什么使用for循環(huán)來循環(huán)選項(xiàng),然后不可按。你可以使用includes函數(shù)來決定應(yīng)用哪個(gè)類。
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;
};
如果你仍然想使用你當(dāng)前的代碼,那么你需要克隆你想要改變的元素,然后做出如下的改變。
//array[x].props.className = classes.dropdownoptionsnotpressable
array[x] = React.cloneElement(array[x], {className: classes.dropdownoptionsnotpressable});