Question

我有以下零食： https://snack.expo.io/@sj458147/rewrite39

在App.js进口的StepOne，StepTwo，StepThree，StepFour，和MyScrollView。在此我想使MyScrollView函数moveToPage可以访问组件StepOne，StepTwo，StepThree和StepFour，我该如何实现呢？我尝试使用道具（跟随各种React教程）没有成功。使用道具来实现这一目标的最佳途径，是否有任何陷阱，以这种方式？谢谢

Answer 1

您遇到的问题是您没有获得对MyScrollView实例的引用，因此无法访问其中的功能

如果将以下内容添加到MyScrollView组件中，这将允许您将引用作为道具onRef传递回

componentDidMount () {
  // this creates the reference when the component mounts
  if (this.props.onRef) {
    this.props.onRef(this);
  }
}

componentWillUnmount () {
  // this removes the reference when the component unmounts 
  if (this.props.onRef) {
    this.props.onRef(undefined);
  }
}

然后您可以按以下方式使用onRef道具

<MyScrollView
  onRef={ref => {this.scrollView = ref}}>
  <StepOne next={()=> this.scrollView.moveToPage(2)}/> // you may wish to add a protection to make sure that this.scrollView is not null.
  <StepTwo />
  <StepThree />
  <StepFour />
</MyScrollView>

您可以在更新后的小吃中看到它的作用

https://snack.expo.io/@andypandy/creating-onref-prop-for-custom-scrollview

Answer 2

如果第二个组件是第一个组件，则可以在props中传递任何内容。

_myFunction(val){} //do something
render(){
        return(
                <Second ABC={(val)=> this._myFunction(val) } /> //here the props name is ABC
        )
 }

，您可以像这样在儿童中使用它：

this.props.ABC("ANYTHING_YOU_WANT_TO_PASS")

如何将函数传递给React Native中的其他组件？

2 个答案: