javascript - 如何使用 ReactJS 将变量值添加到属性？

Question

我正在尝试通过 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，但我很确定这不是问题。

Answer 1

Basic Rule :

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"}