如何在 React Native 中的两个独立功能组件之间传递状态变量？答案

【问题标题】：How do you pass state variables between two separate functional components in React Native?如何在 React Native 中的两个独立功能组件之间传递状态变量？
【发布时间】：2021-07-13 14:36:21
【问题描述】：

 function passVar(){

 const [pass1,setPass1]=useState("")
 const [pass2,setPass2]=useState("")
 const [pass3,setPass3]=useState("")


  return(
  //gets values of these "pass" variables from a text input inside this return function
  );

}

function recieveVar(){

 const [pass4,setPass4]=useState("")
 const [pass5,setPass5]=useState("")


const computeVar = ()=>{


exampleFunction(
pass1,
pass2,
pass3,
pass4,
pass5

)

}

  return(
        //gets values of these "pass" variables from a text input inside this return function



  );

 }



}

我不知道如何很好地响应本机，我需要有关代码编写本身的帮助。我尝试使用 useContext() 但它是用 react 编写的，而且我是初学者，所以我不太了解如何实现它。此外，这段代码没有父函数，两个函数都在同一个文件中。我需要以某种方式首先将状态变量从“passVar”函数传递到“recieveVar”函数。我创建了一个名为“parent”的父函数，它包含两个函数并在父函数中声明了状态变量，但出现了一个问题，因为 Stack Navigator 说它找不到 recieveVar 和 passVar 函数，因为它们是子组件

【问题讨论】：

很难想象您的设置，因为您没有提供有关您设置 StackNavigation 和“父”组件的信息。基本上要共享状态，您可以使用 redux、contextAPI 或在导航中发送参数。
@SaachiTech，这些只是我解决的问题，它没有工作，所以它不是我实际代码的一部分。我只是想在两个函数之间共享状态，但我不知道如何使用 redux/contextAPI 进行实际编码，也不太了解文档。

标签： javascript reactjs react-native react-redux

【解决方案1】：

您可以使用道具在两个功能组件之间传递状态变量。您可以在 PassVar 中声明 state 变量，例如：

const [pass1,setPass1]=useState("")
const [pass2,setPass2]=useState("")
const [pass3,setPass3]=useState("")

然后通过在 Passvar 函数中渲染 receivevar 将这些值传递给 RecieveVar()，然后将这些值作为参数传递，例如：

<ReceiveVar pass1={pass1} pass2={pass2} pass3={pass3} />

那么您可以在RecieveVar() 中接收这些值，例如：

RecieveVar(props){
      console.log(props.pass1);
      console.log(props.pass2);
      console.log(props.pass3);
    };

如果您没有在PassVar 内渲染RecieveVar，那么您可以使用导航将这些值发送到receiveVar。喜欢：

navigation.navigate('RecieveVar',{pass1,pass2,pass3});

那么您可以在receiveVar() 中接收这些值：

const ReceiveVar(props){
 const {pass1,pass2,pass3}=props.route.params;
    console.log(pass1);
    console.log(pass2);
    console.log(pass3);
 }

【讨论】：