React Native中如何将组件函数的结果传递给其他组件？

嘿，这个问题是React里非常常见的组件间通信场景，咱们用状态提升的方式就能轻松解决——把共享数据的管理权提到它们的共同父组件（也就是你的App组件）里，具体实现步骤如下：

核心思路是让父组件作为数据的中转中心：Camera执行完函数后把数据传给父组件，父组件再把数据传递给Display组件。

具体实现步骤 #

1. 在App组件中添加状态，用来存储Camera返回的数据
2. 定义一个回调函数，让Camera可以调用它来更新父组件的状态
3. 把回调函数传递给Camera组件
4. 把存储好的数据传递给Display组件

修改后的完整代码示例 #

import React from 'react';
import { View, Text } from 'react-native'; // 假设你用React Native，可根据实际框架调整

export default class App extends React.Component {
  // 初始化状态，用来存Camera返回的数据
  state = {
    cameraResult: null,
  };

  // 回调函数：接收Camera传过来的数据并更新状态
  updateCameraResult = (data) => {
    this.setState({ cameraResult: data });
  };

  render() {
    const { cameraResult } = this.state;
    return (
      <>
        <View>
          {/* 把回调函数传给Camera组件 */}
          <Camera onGetResult={this.updateCameraResult} />
        </View>
        <View>
          {/* 把共享数据传给Display组件 */}
          <Display result={cameraResult} />
        </View>
      </>
    );
  }
}

// Camera组件示例（你可以替换成自己的业务逻辑）
class Camera extends React.Component {
  componentDidMount() {
    // 模拟执行你的函数获取数据
    const getCameraData = () => {
      // 这里替换成你实际的函数逻辑，比如调用相机API、处理图像等
      const processedData = "Camera组件处理完成的数据";
      // 调用父组件传的回调，把数据传回去
      this.props.onGetResult(processedData);
    };

    getCameraData();
  }

  render() {
    return <View>{/* 这里放Camera的UI内容 */}</View>;
  }
}

// Display组件示例
class Display extends React.Component {
  render() {
    const { result } = this.props;
    return (
      <View>
        {/* 渲染从Camera传递过来的数据 */}
        {result ? <Text>{result}</Text> : <Text>等待Camera返回数据...</Text>}
      </View>
    );
  }
}

额外补充 #

• 如果你的项目用的是函数组件+Hook，逻辑完全一致，只是把类组件的state换成useState，生命周期换成useEffect即可
• 如果后续组件层级变深、需要共享数据的组件变多，也可以考虑用Context API或者Redux这类全局状态方案，但当前这种兄弟组件通信场景，状态提升是最轻量化的选择

内容的提问来源于stack exchange，提问作者Chuks G