我正在尝试通过 ReactJS 创建可动态添加的卡片。为此,我需要为 div 标签创建新的 id(例如,我的代码的第 8 行有一个输入 id="question{qnum+1}_option1"
,它使用变量。如何在 JS 中使用变量以及一些额外的文本来给出一个属性一个值?
无论我在哪里需要 div 标签来包含卡号(表示为变量 qnum 加 1),它都无法工作。
<div className="col s4">
<div className="card light-red">
<div className="card-content blue-text">
<span className="card-title"><div className="row"><div className="input-field col s12"><input id="question{qnum+1}_question" type="text" className="validate" /><label htmlFor="Question {qnum+1}">Question {(qnum + 1).toString()}</label></div></div></span>
<p>
<div className="row">
<div className="input-field col s6"><input id="question{qnum+1}_option1" type="text" className="validate" /><label htmlFor="question{qnum+1}_option1">Option 1</label></div>
<div className="input-field col s6"><input id="question{qnum+1}_option2" type="text" className="validate" /><label htmlFor="question{qnum+1}_option2">Option 2</label></div>
<div className="input-field col s6"><input id="question{qnum+1}_option3" type="text" className="validate" /><label htmlFor="question{qnum+1}_option3">Option 3</label></div>
<div className="input-field col s6"><input id="question{qnum+1}_option4" type="text" className="validate" /><label htmlFor="question{qnum+1}_option4">Option 4</label></div>
</div>
</p>
</div>
</div>
</div>
<div>
包裹整个 HTML 的标签位于 const questionFormat();
中。 ,和questionFormat
使用 React 渲染。
我也在使用 MaterializeCSS,但我很确定这不是问题。
最佳答案
We can embed any JavaScript expression in JSX by wrapping it in curly braces.
不要将变量放在 ""
内,而是使用 template literals ,像这样:
id = {`question${qnum+1}_option1`}
您还可以使用+
(字符串连接),如下所示:
id = {"question" + (qnum+1) + "_option1"}
关于javascript - 如何使用 ReactJS 将变量值添加到属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46321810/