如何使用ReactJS將變量值添加到屬性？

我正在嘗試通過ReactJS創建可動態添加的卡片。爲此，我需要爲div標籤創建新的id（例如，我的代碼的第8行有一個輸入id="question{qnum+1}_option1"，它使用了一個變量。我如何在JS中使用一個變量以及一些額外的文本來給出一個屬性值？如何使用ReactJS將變量值添加到屬性？

無論我需要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，但我很確定這不是問題。

來源

2017-09-20 Aditya Radhakrishnan

Basic Rule：

我們可以通過在花括號包裹其嵌入JSX任何JavaScript表達式。

而不是把變量裏面""的，使用template literals，像這樣：

id = {`question${qnum+1}_option1`}

您還可以使用+（字符串連接），就像這樣：

id = {"question" + (qnum+1) + "_option1"}

來源

2017-09-20 12:17:42

id={'question' + qnum+1 + '_option1'}

這將是工作。

來源

2017-09-20 12:17:15 JiangangXiong

如何使用ReactJS將變量值添加到屬性？

回答

相關問題