问：如何在React Native中调用需要child的参数的函数？

Question

我有一个React Native应用，我需要执行一个函数来更改父组件中的状态。我从一个孩子的孩子中调用该函数。

结构看起来像（Parent-> Child-> Child）。

我将函数传递为道具。我应该如何正确做？

谢谢！

Answer 1

父母

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
         <Child1 onPress={()=>console.log("on press from parent")}/>      
      </View>
    );
  }
}

孩子1

export const Child1 = (props) => (
  <View>
    <Child2 onPress={props.onPress}/>
  </View>)

child2

export const Child2 = (props) => (
  <Button
    onPress={props.onPress}
    title="Press Me"
  >)

Answer 2

您可以直接将参数传递给props调用的函数。 就像下面的子组件中使用的SubmitHandler一样。

父母

import React from 'react';
import {View, Text} from 'react-native';

export default class Parent extends React.Component{
  state={
    name:""
  }
  nameHandler=(userName)=>{
    this.setState({
      name:userName
    })
  }
  render(){
    return (
      <View>
          <Greeting askName={this.nameHandler}/>
         <Text>hello {this.state.name}</Text>
      </View>
    )
  }
}

孩子

import React,{useState} from 'react';
import {View, Button,TextInput} from 'react-native';

export default const Greeting=(props)=>{

  let [userName,setUsername]=useState("");

  const textHandler=(text)=>{
    setUsername(text);
  }

  const sumbmitHandler=()=>{
    props.askName(userName);
  }


  return(
    <View>
      <TextInput placeholder="Enter your name." onChangeText={textHandler}/>
      <Button onPress={sumbmitHandler} title="submit"/>
    </View>
  )

}

Answer 3

const test=(param)=>{ // parent component function
   // do action with param
}
<Test> // parent component

<Test2 doAction={(item)=>this.test(item)}/> // child component import

</Test> 

const Test2=({doAction})=>{   // child component

<Test3 onClick={(item)=>doAction(item)}/>// sub child component

}