reactjs - How to add javascript variable within className - react js - Stack Overflow

admin管理员组

文章数量:1405563

I'm struggling to understand how I can pass through JS variable into className like:

<img className="pos-1 speed-${Math.floor(Math.random() * 10) + 1}" src={Onion1} />

where {Math.floor(Math.random() * 10) + 1} will set a range number so that I can add classes randomly for speed-1 speed-2 etc.

console.log(`pos-1 speed-${Math.floor(Math.random() * 10) + 1}.`);

<img className=`pos-1 speed-${Math.floor(Math.random() * 10) + 1}.` src={Onion1} />

Can anyone help?

Also tried:

const classes = () => {
    return `pos-${Math.floor(Math.random() * 10) + 1} speed-${Math.floor(Math.random() * 10) + 1}.`;
}

<img className={classes} src={Onion1} />

I'm struggling to understand how I can pass through JS variable into className like:

<img className="pos-1 speed-${Math.floor(Math.random() * 10) + 1}" src={Onion1} />

where {Math.floor(Math.random() * 10) + 1} will set a range number so that I can add classes randomly for speed-1 speed-2 etc.

console.log(`pos-1 speed-${Math.floor(Math.random() * 10) + 1}.`);

<img className=`pos-1 speed-${Math.floor(Math.random() * 10) + 1}.` src={Onion1} />

Can anyone help?

Also tried:

const classes = () => {
    return `pos-${Math.floor(Math.random() * 10) + 1} speed-${Math.floor(Math.random() * 10) + 1}.`;
}

<img className={classes} src={Onion1} />

• javascript
• reactjs
• string
• var

Share Improve this question Follow edited Apr 8, 2022 at 17:15 lky asked Apr 8, 2022 at 17:07 lkylky 1,12933 gold badges1818 silver badges3838 bronze badges 1

• 1 Does this answer your question? How to dynamically add a class to manual class names? – Stucco Commented Apr 8, 2022 at 17:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Your last attempt is very close, you just forgot to enclose it in {...}:

className={`pos-1 speed-${Math.floor(Math.random() * 10) + 1}`}

Any values passed as attributes/props in React that are not simple string literals need to be enclosed in {...}.

本文标签： reactjsHow to add javascript variable within classNamereact jsStack Overflow