Flow报错：IDE中JSX提示'unexpected token <'，已包裹父标签仍存疑

我一眼就揪出问题啦——你在<Roster>标签后面直接写的<---specifically refering to this element注释，完全违反了JSX的语法规则！

JSX里的注释不能像普通文本那样随意插入，必须用{/* 注释内容 */}的格式包裹起来。你现在写的<---...里的<符号会被JSX解析器当成新元素的起始标记，自然就抛出了"Unexpected token <"的错误，这跟<TableBody>父标签根本没关系哦。

修正后的完整代码 #

/* @flow */
import React from 'react'
import TableBody from '@material-ui/core/TableBody'
import Roster from './roster.jsx'
import type { MembersType } from '../../typeDefs/MembersType.js'

type RanksType = {
  _id: string | number,
  rankName: string,
  members: Array<MembersType>
};

export default (props: { members: Array<RanksType> }) => (
  <TableBody>
    {props.members.map(({ _id, rankName, members }: RanksType) => (
      {/* specifically refering to this element */}
      <Roster
        key={_id}
        rank={rankName}
        members={members}
      />
    ))}
  </TableBody>
)

额外的小修正提示 #

我还注意到你的Flow类型定义有个小疏漏：你声明props: { members: MembersType }，但后面却调用了props.members.map——能调用map说明members是数组类型，所以我把它改成了Array<RanksType>，这样Flow的类型检查也能更准确~

最后再提醒下：以后写JSX注释时，一定要用{/* ... */}包裹，不管是在元素内部还是props之间都要遵守这个规则哦！

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