如何同时为React类组件包裹useContext与forwardRef？

问题描述 #

我有一个React类组件Map，原本通过函数组件包裹来从useTheme（Context钩子）中传递主题theme。现在需要同时用forwardRef包裹该组件，但原代码存在多个export default的冲突问题。尝试嵌套包裹后出现了“null is not an object, this.props.innerRef”的错误，请问如何同时实现innerRef与theme的正确传递？

原错误代码示例 #

class Map extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView ref={this.props.innerRef} style={styles.map} />
      </View>
    );
  }
}
export default function(props) {
  const theme = useTheme();

  return <Map {...props} theme={theme} />;
}

export default React.forwardRef((props, ref) => (
  <Map innerRef={ref} {...props} />
));

尝试修改后的代码（仍报错） #

class Map extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MapView ref={this.props.innerRef} style={styles.map} />
      </View>
    );
  }
}
export default function(props) {
  const theme = useTheme();

  return <MapForwardingRef {...props} theme={theme} />;
}

const MapForwardingRef = React.forwardRef((props, ref) => (
  <Map innerRef={ref} {...props}/>
));

解决方案 #

问题出在组件包裹的顺序错误，正确的逻辑应该是先通过forwardRef包裹类组件处理ref传递，再用获取theme的函数组件包裹这个带ref的组件，这样ref和theme才能逐层正确传递。

正确代码示例 #

import React from 'react';
import { View, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import { useTheme } from '@react-navigation/native';

// 原始类组件，接收innerRef和theme等props
class Map extends React.Component {
  render() {
    // 给innerRef加判空，避免未传入时的空值错误
    const mapViewRef = this.props.innerRef ?? null;
    return (
      <View style={styles.container}>
        <MapView ref={mapViewRef} style={styles.map} />
      </View>
    );
  }
}

// 第一步：用forwardRef包装类组件，将外部ref转为innerRef props传入
const MapWithRef = React.forwardRef((props, ref) => {
  return <Map innerRef={ref} {...props} />;
});

// 第二步：用函数组件包装带ref的组件，注入theme并传递所有props
const MapWithThemeAndRef = (props) => {
  const theme = useTheme();
  return <MapWithRef {...props} theme={theme} />;
};

// 导出最终组合后的组件
export default MapWithThemeAndRef;

关键说明 #

1. 包裹顺序：先处理ref传递（forwardRef），再处理theme注入，确保ref能穿透到最内层的类组件。
2. 空值处理：在类组件中给innerRef添加?? null的判空逻辑，避免外部未传入ref时触发“null is not an object”错误。
3. props透传：每一层组件都通过{...props}透传所有外部传入的属性，保证功能完整。

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