React中如何根据对象值为HTML标签匹配渲染对应图标

核心判断规则 #

先给每个选项定明确的图标匹配逻辑，三个分支互斥：

• 选项标识（a/b/c/d）和题目的正确答案answer一致：显示正确图标<Correct />
• 选项标识和用户作答userAnswer一致，且和正确答案不一致：显示错误图标<Incorrect />
• 以上两种情况都不满足：显示普通图标<Normal />

代码调整 #

首先修正原有DATA的语法问题：所有字符串类型的字段值需要加引号，否则会被识别为未定义变量触发报错。
同时把硬编码的四个选项p标签改成遍历渲染，避免重复写四次判断逻辑，代码更简洁易维护。

修改后的WrongAnswerLayout组件 #

// WrongAnswerLayout.js
import { Correct, Incorrect, Normal } from 'assets/svgs'

const WrongAnswerLayout = ({ props }) => {
  // 把四个选项整理成可遍历的数组，避免重复编写重复DOM结构
  const options = [
    { key: 'a', text: props.a },
    { key: 'b', text: props.b },
    { key: 'c', text: props.c },
    { key: 'd', text: props.d },
  ]

  // 抽离图标判断逻辑，传入当前选项key返回对应图标组件
  const getOptionIcon = (optionKey) => {
    if (optionKey === props.answer) return <Correct />
    if (optionKey === props.userAnswer) return <Incorrect />
    return <Normal />
  }

  return (
    <li>
      <div>{props.question}</div>
      {options.map(option => (
        <p key={option.key}>
          {getOptionIcon(option.key)}
          {option.text}
        </p>
      ))}
    </li>
  )
}

export default WrongAnswerLayout

修正后的DATA示例 #

// index.js
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"
  },
]

效果验证 #

以你举的第二道体育题为例：

• a选项Golf：key匹配userAnswer、不匹配answer，显示Incorrect图标
• b选项Soccer：两个字段都不匹配，显示Normal图标
• c选项Football：key匹配answer，显示Correct图标
• d选项Basketball：两个字段都不匹配，显示Normal图标
  完全匹配需求。如果出现用户答对的场景，正确答案位置会优先命中正确图标逻辑，不会错误渲染错误标识。

内容的提问来源于stack exchange，提问作者Aden Lee