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

Question

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"
  }
}}

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

标签： react-nativeunexpected-token

Answer 1

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

也不type Props = {}是你想要的。你需要interface为你的道具​​使用一个，比如：

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