React native 笔记：自定义子组件接受带参函数子组件传递参数给父组件函数

最新推荐文章于 2025-05-23 21:35:57 发布

原创最新推荐文章于 2025-05-23 21:35:57 发布 · 742 阅读

0 ·

CC 4.0 BY-SA版权

常见问题同时被 2 个专栏收录

23 篇文章

订阅专栏

React Native

9 篇文章

订阅专栏

本文介绍如何在React中实现子组件通过带参函数向父组件传递参数的方法。具体展示了父组件定义带参函数并将其作为属性传递给子组件，子组件通过props调用这些函数并附带参数，实现数据的逆向流动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在子组件接受带参函数，传递参数给父组件函数

父组件：

<IDTypeDialogView hide={()=>{ this.hideCoverLayer()}}
                  type={(type)=>{this.setStateCredentials_type(type)}}/>

父组件函数：

setStateCredentials_type(type) { //带参
    this.setState({credentials_type: type});
}

hideCoverLayer() {//无参
    this.coverLayer.hide();
}

自定义子组件：props.方法名.bind(null,'参数')

const IDTypeDialogView = props => (
    <View style={{height: 138, width: DEVICE_WIDTH, backgroundColor: 'white'}}>
        <View style={{
            flex: 1,
            flexDirection: 'row',
            height: 45,
            paddingLeft: 15,
            paddingRight: 15,
            alignItems: 'center',
            justifyContent: 'space-between',
        }}>
            <Text onPress={props.hide}>Cancel</Text>
            <Text style={{color: '#3d61ff'}} onPress={props.hide}>Ok</Text>
        </View>
        <View>
            <Text style={{height: 45, alignSelf: 'center'}} onPress={props.type.bind(null,'Passport')}>Passport</Text>
            <Text style={{height: 45, alignSelf: 'center'}} onPress={props.type.bind(null,'ID Card')}>ID Card</Text>
        </View>
    </View>
);

export default IDTypeDialogView;