Question

由于某种原因，我的ide正在打印出“意外的令牌＆lt;。请记住，相邻的JSX元素必须包含在一个封闭的父标记中。对于以下反应代码。我不明白为什么它会打印该错误，因为它所引用的组件专门用<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: MembersType
}) => (
  <TableBody>
    {props.members.map(({ 
      _id,
      rankName,
      members,
    }: RanksType) => (
      <Roster <---specifically refering to this element
        key={_id}
        rank={rankName}
        members={members}
      />
    ))}
  </TableBody>
)

的package.json

{
  "name": "novacms",
  "private": true,
  "scripts": {
    "start": "meteor --settings settings-production.json --port $IP:$PORT",
    "dev": "meteor --settings settings-development.json --port $IP:$PORT",
    "test": "meteor test --driver-package cultofcoders:mocha --port $IP:$PORT"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.42",
    "@novacms/assign": "^1.0.0",
    "@novacms/dependancy-injector": "^1.0.0",
    "@novacms/event-store": "^1.0.0",
    "@novacms/extend": "^1.0.0",
    "@novacms/extendschema": "^1.0.1",
    "@novacms/has": "^1.0.0",
    "@novacms/pipe": "^1.0.0",
    "@novacms/type-check": "^1.0.0",
    "@material-ui/core": "^1.0.0-rc.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-optional-chaining": "^7.0.0-beta.3",
    "bcrypt-nodejs": "0.0.3",
    "event-emitter": "^0.3.5",
    "faker": "^4.1.0",
    "lodash": "^4.17.5",
    "md5": "^2.2.1",
    "meteor-apihelper": "^1.0.0",
    "meteor-node-stubs": "^0.3.3",
    "mobx": "^3.6.1",
    "mobx-react": "^4.4.2",
    "moment": "^2.21.0",
    "npm": "^5.10.0",
    "prettier": "^1.12.1",
    "prop-types": "^15.6.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-router": "^4.2.0",
    "react-storybook": "^1.0.0",
    "recompose": "^0.26.0",
    "semantic-ui-css": "^2.3.1",
    "semantic-ui-react": "^0.79.1",
    "simpl-schema": "^1.4.2",
    "simpl-schema-mockdoc": "^1.0.5",
    "sinon": "^4.5.0",
    "spacejam": "^1.6.1"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "chai": "^4.1.2",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-meteor": "^5.0.0",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-flowtype": "^2.46.3"

  },
  "parser": "babel-eslint"
}

VSCode配置

{
    "files.eol": "\r\n",
    "editor.fontFamily": "'Fira Mono', Consolas, 'Courier New', monospace",
    "eslint.workingDirectories": [
        "./src",
        "./client",
        "./imports",
        "./server"
    ],
    "react.beautify.onSave": true,
    "editor.tabSize": 2,
    "files.trimTrailingWhitespace": true,
    "javascript.validate.enable": false,
    "javascript.format.enable": false,
}
.babelrc

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties", "syntax-dynamic-import"]
}

Answer 1

我有一个非常相似的问题。首先删除（重命名）您使用的.babelrc文件（删除设置位置）。

如果故事书找不到该文件，则它将使用自己的设置。这有助于我证明是引起该问题的文件。

如果这与您相同，则创建一个新的.babelrc文件，并将其放入Storybook文件夹中。故事书现在将使用此功能，您的项目可以继续使用现有的。

棘手的部分是在现有的破坏故事书的.babelrc文件中找到配置设置-对我来说，它是react-hot-load/babel，但其中没有列出。

我的文件最后只有@babel/plugin-proposal-class-properties和@babel/plugin-proposal-rest-spread个插件。

Flow＆＃39;意外令牌＆lt;＆＃39;用于IDE中的jsx代码

1 个答案: