Question

const GrandParent = (props) => {
  const close = () => {
    console.log("Pressed");
  }
  return (<Parent func={() => close()} />)
}

const Parent = (props) => {
  return (<Child onPress={ /**call close function from GrandParent component*/} />)
}

const Child = (props) => {
  return (<Button onPress={() => props.onPress} />)
}

我可以使用GrandParent从Parent组件中调用props的组件方法，但是我想从Child组件中调用它，但是我不能似乎做到了。

Answer 1

它应该像这样工作：

const GrandParent = (props) => {
  const close = () => {
    console.log("Pressed")
  }
  return (<Parent func={() => close()} />)
}

const Parent = (props) => {
  return (<Child func={() => props.func()} />)
}

const Child = (props) => {
  return (<Button onPress={() => props.func()} />)
}

Answer 2

const GrandParent = (props) => {
  const close = () => {
    console.log("Pressed");
  }
 return (<Parent func={() => close()} />)
}

const Parent = (props) => {
  return (<Child onPress={()=> props.func()} fun1={()=> props.func()}/>)
}

const Child = (props) => {
  return (<Button onPress={()=> props.func1()} />)
}

如何在React Native中使用道具使用从父级父级组件到子级组件的方法？

2 个答案: