这个符号在React-Native中是什么意思?

Question

我接手了一个未完成的react-native项目，这个符号让我很困惑。匿名函数写在花括号中，并给出各种参数(handleChange, handleBlur, handlessubmit, values)。我们在哪里定义这些参数?匿名函数在哪里可以获得这些参数的数据?这些论证的作用到底是什么?

这个代码块位于JSX模板中各种原生元素之间。整个项目都是用TypeScript构建的。

return (
<ScrollView
contentContainerStyle={{
flex: 1,
flexGrow: 1,
padding: spacing.xl,
}}
>
<KeyboardAvoidingView style={{ flex: 1 }}>
<TouchableWithoutFeedback
onPress={Keyboard.dismiss}
style={{ flex: 1 }}
>
<ImageBackground
source={require('@/assets/images/text-bg.png')}
resizeMode="cover"
minHeight="100%"
flex={1}
>
<Box flex={1}>
<Text color="loginHeader" fontSize={36} marginBottom="xl">
Login
</Text>
<Formik
initialValues={{ phoneNumber: '' }}
onSubmit={async values => await submitLogin(values)}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<>
<Box width="100%" marginBottom="xl">
<TextInput
keyboardType="phone-pad"
placeholder="Phone Number"
placeholderTextColor={colors.neutral500}
value={values.phoneNumber}
onChangeText={handleChange('phoneNumber')}
onBlur={handleBlur('phoneNumber')}
/>
</Box>
<Button
label="Login"
onPress={handleSubmit}
backgroundColor="buttonBackground"
padding="md"
borderRadius="sm"
shadowColor="black"
shadowOpacity={0.4}
shadowRadius={8.3}
elevation={20}
shadowOffset={{ width: 0, height: 6 }}
/>
</>
)}
{/* <Box width="100%" marginBottom="xl">
<TextInput
secureTextEntry={true}
placeholder="Password"
placeholderTextColor={colors.neutral500}
/>
</Box> */}
</Formik>
</Box>
</ImageBackground>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</ScrollView>
)

Answer 1

这种技术被称为渲染道具。不是将JSX作为children传递给元素，而是传递一个从父元素获取数据作为参数的函数。在您的示例中，Formik使用这些参数调用其childrenprop -它们由Formik组件控制和定义。

Answer 2

这个匿名函数被传递给另一个组件作为子prop，它是render prop的变体模式，用于在组件之间共享功能的模式。

就像你发布的代码一样，一个像Formik的组件管理输入的一些功能，所有这些功能都封装在Formik组件中。为了共享它们，它要求您提供一个应该是函数的道具，并且可以命名为任何名称，但主要是render儿童或.

在自身内部，Formik组件的结构如下:

const handleChange ... // some logic about input being changed

之后在它的return中它会调用你传递的props函数，像这样:

return <>{props.render({handleChange})</>

在你的例子中，Formik正在使用子Prop，像这样:

return <>{props.children({handleChange})</>