如何在 react-native 中将函数的结果从一个组件传递到另一个组件？

Posted 2023-02-23

【中文标题】如何在 react-native 中将函数的结果从一个组件传递到另一个组件？

【英文标题】：how to pass the results of a function from one component to another in react-native?

【发布时间】：2018-10-01 20:54:08

【问题描述】：

我有一个运行函数并返回结果的组件，但我需要其他组件才能从函数访问该数据。我怎么能做到这一点？

这是我的 app.js 包含的组件。这是一个示例，但我的问题是如何在 Camera 组件中运行一个函数，然后在 Display 组件中引用数据。

  export default class App extends React.Component 

  render() 
    return (
            <View>
              <Camera />
            </View>
            <View>
              <Display />
            </View>

    );
  

【参考方案1】：

您可以将数据作为状态存储在父组件中，并将其作为道具传递给Display，并允许Camera 通过回调改变状态（下例中的setData）。

export default class App extends React.Component 
  state = 
    data: null,
  ;
  render() 
    return (
      <View>
        <View>
          <Camera setData=(data) => this.setState( data ) />
        </View>
        <View>
          <Display data=this.state.data />
        </View>
      </View>
    );
  


const Camera = props => <Button onPress=() => props.setData(...) />
const Display = props => <Text>props.data</Text>

【参考方案2】：

如果您的 Display 组件依赖于 Camera 组件数据，我建议您将 Display 组件添加为 Camera 组件中的子组件。 您可以通过以下方式实现：

保持相机组件的状态， 根据某些活动（例如按钮点击）更新函数中的状态 在您的 Camera 组件的 render() 方法中，只有当您的状态中有所需的数据可用时，才挂载 Display 组件。 通过 props 将所需数据传递给 Display 组件。

例如

相机组件

class Camera extends React.Component 
   constructor(props) 
       super(props);
       this.state = 
           data: null
              
    

    foo = () => this.setState(data: 'new_data');

    render() 
         const  data  = this.state;
         const dataPresent = data !== null;
         return (
          
             !dataPresent && ( 
                <button value="set data" onClick=() => this.foo() />                
          )
           
             dataPresent && ( 
                <Display data=data /> 
          )
        );

显示组件

const Display = (props) => <div> <span>  props.data  </span> </div>

如果您仍想在另一个组件中传递/使用来自一个组件的数据，并且两个组件处于同一级别，则您需要为父组件提供状态或拥有像 Redux 这样的全局存储 将数据保存在一个地方并在显示组件中访问它。

【参考方案3】：

我会推荐使用redux，它简化了很多东西，并且不需要升级或将状态传递给父/子

在您的情况下，您需要在 Camera 和 Display 组件中传递道具