export const QuizData = [
{
id: 0,
question: `What is the Capital of India?`,
options: [`New Delhi`, `Mumbai`, `Pune`, `Hyderabad`],
answer: `New Delhi`
},
{
id: 1,
question: `Any question here`,
options: [`any`, `options`, `here`, ` `],
answer: `ans`
},
{
id: 2,
question: `Any question here`,
options: [`any`, `options`, `here`, ` `],
answer: `ans`
},
]
//buttons
<button
className="btn btn-primary"
onClick={() => this.indexHandler(0)}
>
1
</button>
<br />
<button
className="btn btn-primary"
onClick={() => this.indexHandler(1)}
>
2
</button>
<br />
<button
className="btn btn-primary"
onClick={() => this.indexHandler(2)}
>
3
</button>
以上是供參考的問題清單。所以，現在我正在使用靜態按鈕，（例如在 //Buttons 下），我想要的是取決于資料中的問題數量，必須創建相同數量的按鈕。
uj5u.com熱心網友回復：
好的方法是維護兩個獨立的組件-
- 列出問題的組件（比如
QuestionList.js） - 問題特定組件，用于處理對該特定問題執行的操作。（說
Question.js）
QuestionList.js
const QuestionList = () => {
const QuizData = [...]
const indexHandler = (id) => {...}
return(
<>
{QuizData.map(question => (
<Question key={question.id} id={question.id} indexHandlerCallback={indexHandler} />
))}
</>)
}
問題.js
const Question = ({ id, indexHandlerCallback }) => {
const hanldeClick = () => {
// dispatch callback or any other actions
}
return (
<button className="btn btn-primary" onClick={hanldeClick}>
{id 1}
</button>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/466353.html
標籤：javascript html css 反应
下一篇：簡單的Js函式給我未定義的輸出