React开发FAQ组件时如何为渲染的问题与答案设置不同样式

问题根因 #

你原有写法的核心问题是对FAQ数组做了两次独立遍历，先渲染了全部问题、再渲染全部答案，没有做到问题和对应答案的绑定，同时<li>没有包裹在<ul>/<ol>父标签中，也会导致浏览器默认样式干扰你自定义的样式效果。

修复方案 #

按照「单条FAQ条目 = 问题 + 对应答案」的结构单次遍历数组即可，你已经定义了折叠相关的状态，可以直接复用实现点击展开的交互，修改后的渲染代码如下：

// 直接在组件的return部分写遍历逻辑即可，不需要单独定义questionList和answerList
return (
  <div className={classes.faqContainer}>
    {WellbeingData.map((data) => (
      <div key={data.index} className={classes.faqItem}>
        {/* 问题部分 可自定义样式 */}
        <div 
          style={{fontSize: 18, fontWeight: 'bold', cursor: 'pointer', padding: '8px 0'}}
          onClick={() => setExpanded(expanded === data.index ? false : data.index)}
        >
          {data.question}
        </div>
        {/* 答案部分 只有当前条目展开时才显示，可自定义样式 */}
        {expanded === data.index && (
          <div style={{fontSize: 16, padding: '0 0 16px 12px'}}>
            {data.answer}
          </div>
        )}
      </div>
    ))}
  </div>
)

补充说明 #

• 如果你不需要折叠交互，去掉展开判断逻辑直接渲染答案部分即可
• 建议把行内样式统一写到你已经引入的useStyles里统一管理，后续维护更方便
• 如果你确实需要用列表标签，记得把单个FAQ条目或者所有条目外层包裹<ul>，避免HTML语法错误导致的样式异常

内容的提问来源于stack exchange，提问作者Daniel Döbereiner