如何修复意外的令牌，预期的“;”反应中的错误答案

【问题标题】：How to fix Unexpected token, expected ";" error in React如何修复意外的令牌，预期的“;”反应中的错误
【发布时间】：2019-12-29 08:23:10
【问题描述】：

React 很新，所以问题可能很简单，但我收到以下错误：

意外的令牌，应为“;”错误。

错误发生在 render() 函数所在的位置。我该如何解决这个问题？

import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

type Props = {};
export default class App extends Component{Props} {
  render() {
    return (
      <View style={styles.container}>
        <Text>style={styles.welcome}>Login To</Text>
        <Text>style={styles.design}>North Mall</Text>
        <TextInput
          style={styles.input}
          placeholder="Username"
          />
        <TextInput
          style={styles.input}
          placeholder="Password"
          secureTextEntry
        />
        <View style={styles.btnContainer}>
          <TouchableOpacity
            style={styles.userBtn}
            onPress={() => alert("Login Works")}
          >

            <Text style={styles.btnTxt}>Login</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.userBtn}
            onPress={() => alert("Signup Works")}
          >
            <Text style={styles.btnTxt}>Signup</Text>
          </TouchableOpacity>
        </View>
        </View>
      );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0057ff'
  },
  welcome:{
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
    color: "#fff",
    fontFamily:"DancingScript-Bold"
  }
}}

代码继续，但我很确定错误出现在代码的第一部分。

【问题讨论】：

请从我不关心的代码顶部删除类型，以便有数据类型或清除 const 或让
@VishalDhanotiya 我删除了下一行中的类型行和道具：export default class App extends Component { 但现在它给出了 Invariant Violation: objects are not valid as React child...

标签： react-native unexpected-token

【解决方案1】：

如果要实现 props 接口，请将 Component{Props} 更改为 Component<Props>。

另外type Props = {} 也不是你想要的。您需要为您的道具使用interface，例如：

interface Props {
  someProp: string;
  someOtherProp: number;
  // etc
}

【讨论】：

我没有正确理解。我只是在关注一个视频，我不知道我们究竟为什么要使用这些道具，但它在视频上运行时给了我错误
你能分享你的视频链接吗？
好的，所以他使用的是“Flow”，这通常用于明确说明您正在使用的数据类型。正如您在其他 cmets 中讨论的那样，您只需将其删除，您的应用程序仍应运行。但正如您从视频中看到的那样，他使用<Props> 而不是{Props}，我认为这是导致您的语法错误的原因。
当我写而不是 {Props} 和删除 type Props = {}; 它给出了 Invariant Violation 错误，说 Objects are not valid as a React child..
现在最好完全删除 - 这也是 Flow 的一部分，要使用 flow 你需要做一些设置：create-react-app.dev/docs/adding-flow