Question

如何从父组件中触发子组件内部的函数，其功能与抽屉导航相同。

他们这样做是这样的：this.props.navigation.toggleDrawer();来自父级

我该怎么做？

Answer 1

如果我正确理解了您的问题，我认为您有点困惑。您显示的示例是从子级触发父组件功能的示例。

我将通过2个示例来尝试清除这些问题。

1）从子级触发：

要从子级触发父级组件的功能，您可以将函数作为属性传递给子级组件，并在需要时运行它。

class Parent extends React.Component {
  someFunction = (text) => {
    console.log('Message from child: ', text);
  }
  render () {
    return(
      <Child someProperty={this.someFunction} />
    )
  }
}

class Child extends React.Component {
  _onPress = () => {
    // check if the property is defined and not null
    if(this.props.someProperty) {
      // run the function that is passed from the parent
      this.props.someProperty();
    }
  }
  render() {
    return(
      <Button onPress={this._onPress} title="Click Me"/>
    )
  }
}

2）从父级触发：

要从父级触发子级组件上的功能，可以传递一个属性，该属性在父级组件上发生某些操作时会更改。这将触发子组件中的重新渲染（在大多数情况下，有关更多信息，请查看shouldComponentUpdate）。您可以检查属性更改，然后在子组件中执行所需的操作。

class Parent extends React.Component {
  state = {
    someParameter: 'someInitialValue',
  }
  someFunction = (text) => {
    this.setState({ someParameter: 'someValue' });
  }
  render () {
    return(
      <Child someProperty={this.state.someParameter} />
    )
  }
}

class Child extends React.Component {
  someFunction = (text) => {
    console.log('Message from parent: ', text);
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    // Check if the suplied props is changed
    if(prevProps.someProperty !== this.props.someProperty) {
      // run the function with the suplied new property
      this.someFunction(this.props.someProperty);
    }
  }
  render() {
    return(
      {/* ... */}
    )
  }
}

Answer 2

由于您未提供任何代码。这是我对这个问题的看法。

当您在导航器中列出组件时，无论是StackNavigator还是DrawerNavigator，该组件都会收到导航类本身提供的一些道具。

有一个选项可以将更多参数作为道具发送到这些导航对象。在这些额外参数中，可以是您的一种方法toggleDrawer()。

此外，如果导航器中列出了父组件，而子组件没有。您需要将导航道具（this.props.navigation）显式传递给子组件。因此，当您位于该子组件中时，您所要做的就是获取这些道具，瞧，它会做必要的事情！

希望这可以为您澄清一些东西。

编辑 ---第三次评论

假设：

父组件列为DrawerNavigator({ParentScreen: {screen: ParentScreen}})
<Route/>中有一个ParentScreen组件。

因此，您可以做的是将默认导航道具传递给<Route>组件。

就像-<Route navigation={this.props.navigation} />一样，在子组件中，您可以在任何元素的任何this.props.navigation.toggleDrawer()事件上触发onPress()。

Answer 3

class Parent extends React.Component {
 parentFunction() {
   this.refs.chid.childFunction(parameterToPassed);
 }

 render () {
   return(
     {/* ... */}
     <Child ref='child' />
     {/* ... */}
   )
  }
}

class Child extends React.Component {
  childFunction(text){
    console.log('parameter Passed from parent: ', text);
  }

  render() {
    return(
      {/* ... */}
    )
  }
}

在子组件中声明了名为 childFunction 的

函数。并在 parentFunction 函数内部的父组件中调用。

有关更多信息，Call child function from parent component in React Native

从父级触发子级组件内部的函数

3 个答案: