如何使用typescirpt在react native中声明带有可选输入参数的onPress函数

y0u0uwnf  于 2022-12-19  发布在  React
关注(0)|答案(2)|浏览(133)

我正在使用typescript处理react-native。我想要一个带有可选布尔输入参数的onPress方法。并且我想将它直接传递给onPress方法,如果没有输入,则不创建新的arrow function。如以下代码:

const onClose(clearMessages?: boolean) => {
   // doing stuff
   if (clearMessages) {
      // doing extra stuff
   }
}

// use it like this
<Pressable onPress={onClose}>
   <Text>{'Close'}</Text>
</Pressable>

<Pressable onPress={() => onClose(true)}>
   <Text>{'Clear messages'}</Text>
</Pressable>

问题是当我直接调用onClose时,我得到了下面的打字错误:
类型'(清除消息?:布尔值)=〉(事件:GestureResponderEvent)=〉void“无法分配给类型”(事件:GestureResponderEvent)=〉void“。参数”clearMessage“和”event“的类型不兼容。类型”GestureResponderEvent“不能赋给类型”boolean“。ts(2322)

rpppsulh

rpppsulh1#

这是一个预期错误!因为当您自己不调用onClose函数并将其传递给pressable时,pressable预期函数具有以下签名

((event: GestureResponderEvent) => void)

onPress传递类型为GestureResponderEvent的参数,而在您的onClose函数中,您需要boolean,因此出现错误
恕我直言,这看起来很干净

onPress={() => onClose()}

如果你仍然想要它,那么你可以通过使用typescript的联合类型来实现,只需像下面这样改变你的onClose方法

const onClose = (clearMessages?: GestureResponderEvent | boolean) => {
  // doing stuff
  if (typeof clearMessages === 'boolean') {
    // doing extra stuff
  }
};

再加一个(如果只传递true),则

const onClose = (clearMessages?: GestureResponderEvent | true) => {
  // doing stuff
  if (clearMessages === true) {
    // doing extra stuff
  }
};
kq4fsx7k

kq4fsx7k2#

你基本上可以创建一个函数,返回你需要的函数.

const createFn = (input) => () => { console.log(input); }

const printHelloWorld = createFn("hello");

printHelloWorld();

将此函数与useCallback()结合使用,您可以创建所需的onPress函数。
下面是www.example.com =〉https://snack.expo.dev/TPFYRuthi上的完整示例snack.expo.dev
由于服务的原因,它是纯JavaScript的,但在typescript中应该可以正常工作。只要确保返回的函数,带event参数,是onPress的预期Event类型。️

export default function App() {
  const createOnClose = React.useCallback(
    (clearMessages?: boolean) => (event) => {
      if (clearMessages) {
        console.log('clearing messages');
      }
      console.log('onClose');
    },
    []
  );

  return (
    <View>
      <Pressable onPress={createOnClose()}>
        <Text>{'Close'}</Text>
      </Pressable>

      <Pressable onPress={createOnClose(true)}>
        <Text>{'Clear messages'}</Text>
      </Pressable>
    </View>
  );
}

相关问题