Question

我正在用TS作为本机开发我的第一个应用程序，当我尝试将组件与props一起使用时，我的IDE出现了一些错误，但是该应用程序可以与Expo一起使用。...

错误出现在“ ButtonPreset ”

上

import React from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import ButtonPreset from "./Components/reusable/ButtonPreset";

export interface ButtonPrefab {
  _pressAction(): void;
  pressAction(): void;
}

export default class App extends React.Component {
  _pressAction = () => {
    console.log("Hello");
  }

  title: string = "Se connecter";

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Splizi</Text>
        </View>
        <View style={styles.login}>
          <TextInput style={styles.input} placeholder="E-mail" />
          <TextInput style={styles.input} placeholder="Mot de passe" />
          <ButtonPreset pressAction={this._pressAction} title={this.title} />
        </View>
      </View>
    );
  }
}


import React from "react";
import { StyleSheet, Button } from "react-native";

type ButtonPresetProps = {
  pressAction: () => void;
  title: string
}

class ButtonPreset extends React.Component<ButtonPresetProps> {
  render() {
    return <Button onPress={this.props.pressAction} title={this.props.title} />;
  }
}

const styles = StyleSheet.create({
  // input: {
  //     marginLeft: 40,
  //     marginRight: 40,
  //     marginBottom: 20,
  //     height: 60,
  //     borderRadius: 50,
  //     borderWidth: 0.5,
  //     paddingRight: 20,
  //     paddingLeft: 20,
  //     fontSize: 18,
  //     borderColor: '#d6d6d6',
  //     backgroundColor: '#ffffff',
  // }
});

export default ButtonPreset;

我收到以下错误。请帮我解决这个问题。

输入'{pressAction：（）=> void; title：字符串}'不能分配给'IntrinsicAttributes＆IntrinsicClassAttributes＆Readonly <{}>＆Readonly <{children ?: ReactNode; }>'。属性'pressAction'在类型'IntrinsicAttributes和IntrinsicClassAttributes＆Readonly <{}>和Readonly <{子代上不存在：ReactNode; }>'。

Answer 1

根据错误消息，ButtonPreset的道具需要适当的类型。

type ButtonPresetProps = {
  pressAction: () => void;
  title: string;
};

class ButtonPreset extends React.Component<ButtonPresetProps> {
  // other code omitted
}

Answer 2

export interface ButtonPrefab {
    _pressAction:() => void;
    pressAction:() => void;
}

export default class App extends React.Component<ButtonPrefab> {}

尝试一下。

如何使用道具解决此错误（ReactNative +打字稿）

2 个答案: