如何在React Native功能组件中从父组件调用子函数？

debugcn 发表于 Dev

艾哈迈德

您好，我想通过使用useRef（）从App.js调用AddModalBox.js中的showModal（）来将AddModalBox.js访问到App.js中，但它不起作用，它说：showmodal.showMdal（）不是函数。感谢您的帮助... App.Js

    import React ,{useRef,useState} from 'react'
    import {View,Text,StyleSheet,Image,Button,FlatList, Alert } from 'react-native'
    import data from './components/Data'
    import Swipeout from 'react-native-swipeout'

    import AddModalBox from './components/AddModalBox'

    const App=()=>{
      const showmodal =useRef()
      const  callModal=()=>{
        showmodal.showModal()
      }
      return(          
        <>
         <View style={{backgroundColor:'red',height:10,flex:1,flexDirection:'row',marginTop:10}}>
          <View style={{flexDirection:'row',alignItems:'center',justifyContent:'flex-end'}}>
            <Button title="+" onPress={callModal}/>
          </View>
        </View>
        <FlatList data={data} renderItem={({item,index})=> <Mydata item={item} index={index} parentFlatList={refreshFlatList}/>}
        keyExtractor={item=>item.id}

        /> 
        <AddModalBox ref={showmodal}/>
    </>
      )
    }

    export default App;

AddModalBox.js我想从App.js调用showModal（）函数……

import React,{useRef}from 'react'
import {Text,View,Button,Dimensions} from 'react-native'
import Modal from 'react-native-modalbox'
import { useState } from 'react'
//import data from './components/Data'

var screen=Dimensions.get('window')

const AddModalBox=(props)=>{
    let isOpen=false

         // I want call this function in App.js
    const showModal=()=>{
        isOpen=true
    }
    return(
        <>
        <Modal  style={{width:screen.width-80,height:200,justifyContent:'center'}}
        position='center'
        backdrop={true}
        onClosed={()=>isOpen=false}
        ref={show}
        isOpen={isOpen}
        >
        <Text>hello from modal</Text>
        </Modal>
        </>
    )
}

export default AddModalBox;

Karine Liuti

让我向您展示一个在子组件和父组件之间使用参数的示例。此示例是关于变量可见性的，但是您可以查看并获得在代码上使用的见解：

//Parent component
    class Parent extends Component {
        state = {
          viewClhild: false
        }

        goToChild = (task) => {    
            this.setState({viewChild: true})
        }

        onShowClhildChange(viewChild) {
            this.setState({ viewChild });
          }

        render() {
            <View>
                {
                    this.state.viewChild 
                      ? <ChildScreen onShowClhildChange={this.onShowClhildChange.bind(this)} /> 
                      : <Text>Show Parent</Text>
                  }
                <Button 
                    onPress={() => {this.goToChild()}}
                >
                    <Text style={button.text}>Entrar</Text>
                </Button>
            </View>
        }

    }


    //Child Component
    class ChildScreen extends Component {
        isChildVisible = (isVisible) => {
            this.setState({ viewChild: isVisible })
            if (this.props.onShowClhildChange) {
               this.props.onShowClhildChange(isVisible);
            }
          }
          constructor (props) {
            super(props);

            this.state = {
              viewChild: this.props.viewChild
            }
          }

          render() {
            return (
              <View>
                <Button 
                  onPress={() => this.isChildVisible(false)}
                >
                  <Text>CLOSE CHILD SCREEN</Text>
                </Button>
            </View>
            )
        }
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。