Question

即使我在handler期间传递了父函数，也无法从子组件调用函数render。当用户单击图标标题时，将调用此函数，至少它将提醒文本"in handler"，但它什么也没做。

孩子实际上是一个createBottomTabNavigator的常量，它将调用另一个ChildScreen作为屏幕的组件。

class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this);
    this.state = {
     someVar: someValue
    }
  }

  handler(e) {
    alert('in handler!');

    this.setState({
      someVar: someValue
    })
  }

  render() {
    return <Child screenProps={this.state} handler={this.handler} />
  }
}

const Child = createBottomTabNavigator(
{
  Home: {
    screen: ChildScreen,
    navigationOptions:{
      title: "Child",
      ..
      },
    },
  ...
})

class ChildScreen extends React.Component {
  render() {
    return ...
      <Header
        ...
        rightComponent={{ icon: 'translate', onPress: () => this.props.handler }}
        ...
      />
  }
}

Answer 1

您不调用该功能，这应该可以解决问题

  <Header
    ...
    rightComponent={{ icon: 'translate', onPress: () => this.props.handler() }}
    ...
  />

或如果用花括号调用该函数，则需要像这样

返回它

 <Header
...
rightComponent={{ icon: 'translate', onPress: () =>{return this.props.handler() }}
...
/>

由于ChildSceen不是Parent的直系孩子，您需要像这样将道具从Child传递到ChildScreen

const Child = createBottomTabNavigator(
{
   Home: {
      screen: (props) => <ChildScreen {...props} />
   ...
   }
}

从子组件调用父函数不起作用

1 个答案: