ReactNative中的Typescript -有解無憂

我的App.tsx檔案上有以下代碼：

import React from 'reaction';
import {StyleSheet, View, SafeAreaView, Text}。from 'react-native'/span>。

export 介面 Props {
  totalCount: 數字。
  readingCount: number;
  doneCount: number;
}

介面 State {
  totalCount: 數字。
  readingCount: number;
  doneCount: number;
}

export default class App extends React. Component<Props, State> {
  constructor(props: Props) {
    super（props）。

    this.state = {
      totalCount: 0,
      readingCount: 0,
      doneCount: 0,
    };
  }
  render（）{
    return (
      <View style=> 
        <SafeAreaView />
        <View style={styles.headerContainer}>/span>
          <Text style={styles.headerTitle}> headerTitle}>書蟲</Text>/span>
        </View>/span>
        <View style={styles.bodyContainer}>/span>
          <Text>Body</Text> 
        </View>/span>
        <View style={styles.footerContainer}>/span>
          <View style={styles.menuContent}> 
            <Text>Book List</Text>/span>
            <Text>{this.state.totalCount}</Text> 
          </View>/span>
          <View style={styles.menuContent}> 
            <Text>Reading</Text>
            <Text>{this.state.readingCount}</Text> 
          </View>/span>
          <View style={styles.menuContent}> 
            <Text>完成</Text>
            <Text>{this.state.doedCount}</Text> 
          </View>/span>
        </View>/span>
        <SafeAreaView />>
      </View>
    );
  }
}

const styles = StyleSheet.create（{
  container: {
    flex: 1,
  },
  headerContainer: {
    borderBottomWidth: 1,
    borderColor: 'black',
    高度。50,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerTitle: {
    fontSize: 24,
  },
  bodyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  menuContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  footerContainer: {
    flexDirection: 'row',
    borderTopWidth: 1,
    borderColor: 'black',
    高度。50,
  },
});

注意，在頂部我有匯出介面Props和介面State。

然后在mu export default class App里面我把<Props, State>放在最后。

我的問題是，由于我只需要狀態，而且這個類組件不會接收任何道具，我是否可以省略頂部的export interface Props而簡單地保留介面State。然后，我的匯出默認值應該是這樣的：export default class App extends React.Component<State> {，沒有 "Props "一詞。

我試著去掉它，但它在建構式中被要求像這樣：

 constructor(props: Props) {
    super（props）。

    this.state = {
      totalCount: 0,
      readingCount: 0,
      doneCount: 0,
    };
  }

對不起，我是react native和typescript的新手，所以我只想用類組件盡可能多地學習。

uj5u.com熱心網友回復：

你可以查看檔案https://reactnative.dev/docs/typescript或TypeScript React State without Props 。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/332472.html

標籤：

上一篇：只在子串后面有空格或沒有的情況下洗掉子串（即字串的結尾）-Python

下一篇：型別為'string'的引數不能分配給型別為'ChangeEvent<HTMLLIElement>'的引數。