0

我正在构建一个 React 应用程序，我希望将 Watermelondb 用于离线存储，但我不知道如何将它与 TypeScript 一起使用。我已经从 Watermelondb 库创建了数据库以及我的课程和课程模型文件。在我的 App.tsx 中，我使用了数据库提供程序，如下所示：

import 'react-native-gesture-handler';
import React from 'react';
import { View, StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import DatabaseProvider from '@nozbe/watermelondb/DatabaseProvider';

import database from './database/index.js';

import AppProvider from './hooks';

import Routes from './routes';

const App: React.FC = () => (
  <NavigationContainer>
    <StatusBar barStyle="light-content" backgroundColor="#6548A3" translucent />
    <DatabaseProvider database={database}>
      <AppProvider>
      <View style={{ flex: 1, backgroundColor: '#6548A3' }}>
        <Routes />
      </View>
    </AppProvider>
    </DatabaseProvider>
  </NavigationContainer>
);

export default App;

然后我的功能组件中出现 Typescript 错误：

import React from 'react';
import { View } from 'react-native';
const Dashboard: React.FC = ({courses, lessons}) => {
return (
    <View>
    </View>
  );
}

在课程和课程中，我收到以下错误：

类型 '{ children?: ReactNode; 上不存在属性 }'

如何使用 TypeScript 来解决这些错误？

4

1 回答 1

0

React.FC是一个依赖于道具的泛型。键courses和lessons必须存在于您的道具类型中才能解构它们。当不设置泛型并仅使用React.FC时，这意味着该组件不采用任何道具。

你想要这样的东西：

interface DashboardProps {
  courses: Course[]; // an array of some Course type that you need to define
  lessons: Lesson[]; // same for lessons
}

const Dashboard: React.FC<DashboardProps> = ({courses, lessons}) => {
return (
    <View>
    </View>
  );
}
于 2021-02-28T04:48:41.570 回答