typescript - React Native bug - 数字文字后面不允许直接使用标识符

Question

我正在尝试使用在 React Native 组件中映射的数据文件，但出现以下错误:

不允许在数字文字后面直接使用标识符。

./assets/data/players.js 5:11 模块解析失败:标识符紧接在数字之后 (5:11) 文件是用这些加载器处理的: “../../../../../../usr/local/lib/node_modules/expo-cli/node_modules/babel-loader/lib/index.js。

您可能需要一个额外的加载器来处理这些加载器的结果。 name: 'C.罗纳尔多', 比赛: 'BEL v POR', > 价格: 12_200_000, 位置: 'FWD', 总积分: 29.

出于某种原因，它在 data.js 中突出显示价格:> 价格:12_200_000，

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo']
  };
};

玩家.js

export const players = [
  {
    id: '1',
    name: 'C. Ronaldo',
    match: 'BEL v POR',
    price: 12_200_000,
    position: 'FWD',
    totalPoints: 29
  },
  {
    id: '2',
    name: 'G. Wijnaldum',
    match: 'NED v CZE',
    price: 8_100_000,
    position: 'MID',
    totalPoints: 23
  },
  {
    id: '3',
    name: 'E. Forsberg',
    match: 'SWE v UKR',
    price: 7_700_000,
    position: 'MID',
    totalPoints: 23
  },
  {
    id: '4',
    name: 'D. Dumfries',
    match: 'NED v CZE',
    price: 5_600_000,
    position: 'DEF',
    totalPoints: 22
  },
  {
    id: '5',
    name: 'P. Schick',
    match: 'NED v CZE',
    price: 8_400_000,
    position: 'FWD',
    totalPoints: 21
  },
  {
    id: '6',
    name: 'X. Shaqiri',
    match: 'FRA v SUI',
    price: 7_200_000,
    position: 'MID',
    totalPoints: 21
  },
  {
    id: '7',
    name: 'M. Depay',
    match: 'NED v CZE',
    price: 10_100_000,
    position: 'FWD',
    totalPoints: 20
  },
  {
    id: '8',
    name: 'C. Ronaldo',
    match: 'BEL v POR',
    price: 12_200_000,
    position: 'FWD',
    totalPoints: 29
  },
  {
    id: '9',
    name: 'G. Wijnaldum',
    match: 'NED v CZE',
    price: 8_100_000,
    position: 'MID',
    totalPoints: 23
  },
  {
    id: '10',
    name: 'E. Forsberg',
    match: 'SWE v UKR',
    price: 7_700_000,
    position: 'MID',
    totalPoints: 23
  },
  {
    id: '11',
    name: 'D. Dumfries',
    match: 'NED v CZE',
    price: 5_600_000,
    position: 'DEF',
    totalPoints: 22
  },
  {
    id: '12',
    name: 'P. Schick',
    match: 'NED v CZE',
    price: 8_400_000,
    position: 'FWD',
    totalPoints: 21
  },
  {
    id: '13',
    name: 'X. Shaqiri',
    match: 'FRA v SUI',
    price: 7_200_000,
    position: 'MID',
    totalPoints: 21
  },
  {
    id: '14',
    name: 'M. Depay',
    match: 'NED v CZE',
    price: 10_100_000,
    position: 'FWD',
    totalPoints: 20
  },
]

我用来映射数据和类型文件的组件:

enum Positions {
  FWD,
  MID,
  DEF,
  GK,
}

export type Player = {
  id: string;
  name: string;
  match: string;
  price: number;
  position: Positions;
  totalPoints: number;
};

import React from "react";
import { View, Text, Image, StyleSheet } from "react-native";
import { Player } from "../types";

interface Props {
  player: Player;
}

const PlayerListItem = ({ player }: Props) => {
  return (
    <View style={styles.container}>
      <Image style={styles.image} />

      <View style={{ flexGrow: 1 }}>
        <Text style={styles.name}>{player.name}</Text>
        <Text>{player.match}</Text>
      </View>

      <View style={[styles.colContainer, { alignItems: "flex-end" }]}>
        <Text style={styles.name}>${player.price}</Text>
        <Text>{player.position}</Text>
      </View>

      <View>
        <Text style={styles.points}>{player.totalPoints}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    width: "100%",
    justifyContent: "space-between",
    padding: 10,
    alignItems: "center",
    borderBottomWidth: 1,
    borderColor: "#eee",
  },
  colContainer: {
    marginHorizontal: 15,
  },
  image: {},
  name: {
    fontWeight: "bold",
  },
  points: {
    fontWeight: "bold",
    fontSize: 18,
  },
});

export default PlayerListItem;

Answer 1

您的代码无效，因为 12_200_000 不是有效数字且未在任何地方定义。因此它需要是一个字符串，并使用 '12_200_000' 或 1220000 声明为实数。