意外令牌,预期为“;”在React Native构造函数中

时间:2019-08-01 11:51:44

标签: typescript react-native

当我想在我的React Native项目中添加构造函数时,我总是以意想不到的标记“;”结尾(6:28)。

我已经尝试在每个可能的位置添加分号,但无法弄清楚实际出了什么问题,因为我是TypeScript和React Native的新手。

export default function App() {

  constructor(props: Props) {
    super(props);

    this.state = {
      welcomeText: 'Hey this is not working'
    };
  }

  return (
    <View style={styles.container}>
      <View style={styles.subContainer}>

      </View>
      <View style={styles.subContainer}>
        <Text style={text.header}>Welcome</Text>
        <Text style={text.onBoardingContent}>

        </Text>
      </View>
    </View>
  );
}

...
SyntaxError: /Users/Puerschel/Desktop/Whale/Project/Whale/App.tsx: Unexpected token, expected ";" (6:28)

  4 | export default function App() {
  5 |
> 6 |   constructor(props: Props) {
    |                             ^
  7 |     super(props);

  8 |
  9 |     this.state = {
Failed building JavaScript bundle.

1 个答案:

答案 0 :(得分:7)

您正在使用功能组件。在es6中,函数没有构造函数。您应该改用类组件。看起来像这样:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { myState: false };
  }
render() {
      return <h1>Class component.</h1>;
    }
}