React中div内map遍历props数组时箭头函数报错如何解决

你的代码存在4处语法/写法问题，是VS Code标注箭头位置报错的直接原因：

• JSX嵌入JS表达式未加包裹标记：在div标签内部写数组遍历逻辑属于JS执行逻辑，JSX语法要求所有嵌入的JS表达式必须用{}包裹，直接写content.map会被解析器判定为普通文本，直接触发语法错误。
• map回调函数写法错误：
  • 箭头函数如果用{}包裹函数体，必须手动写return返回要渲染的JSX节点；如果要隐式返回节点，需要把函数体的{}替换为()
  • 你错误将分号;写在了回调函数的闭合大括号外侧、map方法的闭合小括号内侧，属于JS语法结构错误，这就是箭头位置标红的核心诱因。
• 样式字段拼写错误：你写的collaspe是错误拼写，如果这是你提前定义的控制显隐的变量，正确拼写为collapse（字母p在s之前）；如果是直接写CSS属性值，需要给值加引号，实现隐藏效果通常用'none'即可。
• 缺少列表渲染必填key：React要求遍历生成的同级JSX节点必须绑定唯一的key属性，否则运行时会抛出性能相关警告，优先用数据项的唯一ID作为key，没有唯一ID时可暂时用遍历下标代替。

修复后可正常运行的代码 #

const ExampleBlock = ({ question, content }) => {
  // 替换为你实际的显隐控制逻辑
  const collapse = 'none';
  return (
    <div style={{ display: collapse }}>
      {content.map((item, index) => (
        <InlineMath key={index}>{item}</InlineMath>
      ))}
    </div>
  )
};

注意：如果后续content数组项会发生增删、排序操作，请不要用遍历下标作为key，避免出现渲染异常。

内容的提问来源于stack exchange，提问作者esoteric elf