时间戳

首页 > 解决方案 > 访问嵌套子组件中的父回调函数

javascript - 访问嵌套子组件中的父回调函数

问题描述

我正在尝试通过在 React Native 的顶级组件中实现此模式来创建全局可访问的模式。为此，我尝试使用回调函数扩展 SwitchNavigator（基于此链接），并通过导航道具使其可访问，但子组件似乎无法访问回调。如何使所有子组件都可以访问回调？

我当前的导航结构如下图所示（假设我尝试从 Leaf Component 访问回调）：

下面的片段显示了我当前的逻辑。

在 App.js 中：

const SwitchNavigatorComponent = createSwitchNavigator({
  TabNavigator: MyTabNavigator,
  OtherComponent: MyOtherComponent
})

// Extending the Switch Navigator component 
class ExtendedSwitchNavigator extends Component {
  static router = SwitchNavigatorComponent.router;
  componentDidMount(){
    this.setState({
      modalVisible: false
    })
  }
  presentModal = (status) => {
      this.setState({modalVisible: {status}});
  }
  render(){
    const { navigation } = this.props;
    return(
      <SwitchNavigatorComponent
      navigation={navigation}
      presentModal={this.presentModal} />

     ... (conditionally render modal)
    )
  }
}

const App = createAppContainer(ExtendedSwitchNavigator);
export default App;

叶组件：

export default class LeafComponent extends Component {

  constructor(props) {
      super(props);
      console.log(this.props)
  }

  componentDidMount() {
    this.props.presentModal(true);
  }
}

尝试使用 访问回调时this.props.presentModal(true)，出现错误

this.props.presentModal 不是一个函数。（在 'this.props.presentModal(true)' 中，'this.props.presentModal' 未定义）

props当我在叶子组件的构造函数中打印时，我得到

 Object {
   "navigation": Object {
     "actions": Object {
       "dismiss": [Function dismiss],
       "goBack": [Function goBack],
       "navigate": [Function navigate],
       "pop": [Function pop],
       "popToTop": [Function popToTop],
       "push": [Function push],
       "replace": [Function replace],
       "reset": [Function reset],
       "setParams": [Function setParams],
     },
     "addListener": [Function addListener],
     "dangerouslyGetParent": [Function anonymous],
     "dismiss": [Function anonymous],
     "dispatch": [Function anonymous],
     "emit": [Function emit],
     "getChildNavigation": [Function getChildNavigation],
     "getParam": [Function anonymous],
     "getScreenProps": [Function anonymous],
     "goBack": [Function anonymous],
     "isFocused": [Function isFocused],
     "navigate": [Function anonymous],
     "pop": [Function anonymous],
     "popToTop": [Function anonymous],
     "push": [Function anonymous],
     "replace": [Function anonymous],
     "reset": [Function anonymous],
     "router": undefined,
     "setParams": [Function anonymous],
     "state": Object {
       "key": "...",
       "routeName": "Leaf1",
     },
   },
   "screenProps": undefined,
 }

其中不包含有关 presentModal 的任何内容。

[更新] 根据@Gaël S 的要求，这里是 ExtendedSwitchNavigator 和 Leaf 之间的组件。

const Tab1StackNavigator = createStackNavigator({
  LeafComponent: LeafComponent
})

const MyTabNavigator = createBottomTabNavigator({
  Tab1: Tab1StackNavigator,
  Tab2: Tab2Screen,
  Tab3: Tab3Screen
  })

标签： javascriptreactjsreact-native

解决方案

您可以使用screenProps将属性传递到所有屏幕：

<SwitchNavigatorComponent
  navigation={navigation}
  screenProps={{presentModal: this.presentModal}} />

然后每个屏幕都可以通过this.props.screenProps.presentModal.

有关更多详细信息，请参阅文档

推荐阅读