React Native子组件调用Provider函数报错未定义，请求排查解决

错误原因 #

你当前的MyProvider只是单纯渲染子组件，没有通过任何方式将内部的handlePress函数传递给子组件；而你尝试的provider.wrapper应该是指React Context的用法，但未正确实现Context的创建、值传递与消费逻辑，导致问题恶化。

解决方案 #

方案1：直接通过props传递（适合组件层级较浅的场景）

修改MyProvider，将handlePress通过克隆子组件的方式传递给它：

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

const MyProvider = (props) => {
  const { children } = props;
  const handlePress = () => {
    console.log("Provider component function called!");
  };
  // 克隆子组件并传入handlePress props
  return (
    <View>
      {React.cloneElement(children, { handlePress })}
    </View>
  );
};

const NoLocationAccess = (props) => {
  const { handlePress } = props;
  console.log("handlePress : ",handlePress)
  return (
    <TouchableOpacity onPress={handlePress}>
      <Text>I am the child component</Text>
    </TouchableOpacity>
  );
};

// 使用时必须将NoLocationAccess包裹在MyProvider内
// 示例：
// <MyProvider>
//   <NoLocationAccess />
// </MyProvider>

export default NoLocationAccess;

方案2：使用React Context（适合组件层级较深的场景，标准Provider模式）

这是真正意义上的Provider共享逻辑的方式，通过Context跨层级传递函数：

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

// 1. 创建Context对象
const MyContext = createContext();

// 2. 实现Provider组件，共享函数/状态
const MyProvider = (props) => {
  const { children } = props;
  const handlePress = () => {
    console.log("Provider component function called!");
  };

  // 定义要共享的Context值
  const contextValue = {
    handlePress
  };

  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
};

// 3. 子组件中消费Context
const NoLocationAccess = () => {
  // 通过useContext获取Provider传递的函数
  const { handlePress } = useContext(MyContext);
  console.log("handlePress : ", handlePress);
  return (
    <TouchableOpacity onPress={handlePress}>
      <Text>I am the child component</Text>
    </TouchableOpacity>
  );
};

// 使用时必须将NoLocationAccess（或其上层组件）包裹在MyProvider内
// 示例：
// <MyProvider>
//   <NoLocationAccess />
// </MyProvider>

export default NoLocationAccess;
export { MyProvider };

注意事项 #

• 使用任何一种方案，都必须确保NoLocationAccess被MyProvider包裹，否则无法获取到handlePress函数。
• 如果你的组件层级较深，优先选择Context方案，避免多层props传递的繁琐。

内容的提问来源于stack exchange，提问作者Ahmed Yasin