如何在 React Native 中的两个组件之间传递值？答案

【问题标题】：How to pass Value between two component in React Native?如何在 React Native 中的两个组件之间传递值？
【发布时间】：2022-01-19 08:26:33
【问题描述】：

我正在从头开始学习 React Native，但遇到了一个问题。我从用户那里获得了配置文件组件中的名称并将其正确存储到 AsyncStorage 中。现在，我想在其他组件中使用该名称，但我无法在两个组件之间传递数据。

【问题讨论】：

标签： react-native components

【解决方案1】：

最好在此处发送您的代码。但以下方法可能会对您有所帮助。

如何在父组件和子组件之间传递数据首先，让我们在父组件和子组件之间传递数据。

首先，您需要创建两个组件，一个父组件和一个子组件。

    import React from 'react'

    export default function Parent() {
    return (
    <div>
      
    </div>
  )
}

父.js

 import React from 'react'

     export default function Child() {
    return (
        <div>
            
        </div>
     )
    }

接下来，您将在父组件中导入子组件并返回它。

    import React from 'react'
    import Child from './Child';

    export default function Parent() {
    return (
    <div>
      <Child/>
    </div>
   )
   }

然后您将创建一个函数和一个按钮来触发该函数。此外，您将使用 useState Hook 创建一个状态来管理数据。

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

【讨论】：

【解决方案2】：

您可以使用 AsyncStorage 从另一个组件中读取它。这里不需要经过。

【讨论】：

很高兴听到。这也可能在将来的情况下对您有所帮助Lifting state up