React中如何高亮指定<li>列表元素（正确答案项）

核心逻辑：你的接口返回数据中，correctAnswer字段本身就是正确选项在answerOptions数组中的索引值，只要在遍历渲染选项时拿到每个选项的下标，和correctAnswer做比对，就能定位到需要高亮的<li>元素，具体修改分为三步：

• 首先保证上层组件传值时，将每道题的correctAnswer属性和answerOptions数组一起传到渲染答案列表的组件中，不要只传选项数组。
• 遍历选项数组时，通过map方法的第二个参数拿到每个选项的索引，比对当前索引是否等于correctAnswer，将比对得到的布尔值作为prop传给单条答案组件AnswerDetails。
  修改后的列表渲染代码参考：

  <ol className="answers-list">
   {
      // map的第二个参数即为当前选项在数组中的索引
      props.answerOptions.map((answer, idx) => (  
         <AnswerDetails 
            key={answer}
            answerText={answer}
            // 比对判断当前选项是否为正确答案
            isCorrect={idx === props.correctAnswer}
          /> 
      ))
    }
  </ol>
  

  这里将原代码中传递单个答案的prop名从answerOptions改为answerText，语义更清晰，如果你不想修改原有命名，沿用旧prop名也不会影响逻辑。
• 在AnswerDetails组件中，根据传入的isCorrect标识，给对应<li>添加高亮样式即可。你可以通过添加CSS类实现样式控制，也可以直接给正确答案的文本加粗，修改后的组件代码参考：

  import './AnswerDetails.css';
  
  const AnswerDetails = (props) => {
      return (
        <li className={props.isCorrect ? 'correct-answer' : ''}>
         {props.answerText}
        </li>
       );
   }
  
  export default AnswerDetails;
  

  最后在AnswerDetails.css中添加高亮样式即可：

  .correct-answer {
    font-weight: bold;
    /* 如果需要其他高亮效果，比如浅绿色背景，可在这里追加配置 */
  }
  

你提供的示例数据中correctAnswer是从0开始计数的数组下标，和JavaScript数组的索引规则完全匹配，直接比对即可，不需要额外做数值转换。

内容的提问来源于stack exchange，提问作者Marc -