我無法使用物件的值將正確的圖示符號分配給標簽。
請先檢查我的代碼。
// index.js
// I just made this code, so there might be misspelling.
const DATA = [
{
question: what is the name of the inventor?,
a: Mark,
b: Jacob,
c: Aden,
d: Morrie,
answer: a,
userAnswer: c
},
{
question: what is the most favorite sports in United States?,
a: Golf,
b: Soccer,
c: Football,
d: Basketball,
answer: c,
userAnswer: a
},
]
const index = () => {
const wrongQuestions = DATA.map((answer) => (
<WrongAnswerLayout props={answer} key={answer.question} />
))
return (
<ul>
{wrongQuestions}
</ul>
)
}
// WrongAnswerLayout.js
const WrongAnswerLayout = ({ props }) => {
return (
<li>
<div>{props.question}</div>
<p>{props.a}</p>
<p>{props.b}</p>
<p>{props.c}</p>
<p>{props.d}</p>
<p>userAnswer {props.userAnswer}</p>
</li>
)
}
最后，我有，
import { Correct, Incorrect, Normal } from 'assets/svgs'
這些是標記正確答案、錯誤用戶答案和僅問題的圖示。
它看起來像這樣。
但是，我想做的是使用DATA.answerand DATA.userAnswer，我想為標簽提供適當的圖示。
例如。對于DATA[1],Incorrect Sign應該放在 Golf 旁邊（這是用戶的答案，但不是實際答案），并且Correct Sign應該放在 Football 旁邊。此外，其他選擇應該在<Normal />組件旁邊。
我很難弄清楚這個問題。請給我一些指導。謝謝你。
uj5u.com熱心網友回復：
您可以遍歷所有選項并有條件地顯示相應的圖示。
const DATA = [
{ question: "What is the name of the inventor?", a: "Mark", b: "Jacob", c: "Aden", d: "Morrie", answer: "a", userAnswer: "c" },
{ question: "What is the most favorite sports in United States?", a: "Golf", b: "Soccer", c: "Football", d: "Basketball", answer: "c", userAnswer: "a" },
];
const App = () => (
<ul>
{DATA.map((ques) => (
<WrongAnswerLayout ques={ques} key={ques.question} />
))}
</ul>
);
const WrongAnswerLayout = ({ ques }) => {
return (
<li>
<p><strong>{ques.question}</strong></p>
<ol>
{["a", "b", "c", "d"].map((opt) => (
<li key={opt}>
{ques[opt]}{" "}
{ques.answer === opt && <i className="fa-solid fa-check" />}
{ques.answer !== ques.userAnswer && ques.userAnswer === opt && (
<i className="fa-solid fa-xmark" />
)}
</li>
))}
</ol>
<p>User's Answer: {ques.userAnswer}</p>
</li>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="root"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/488782.html