如何创建 ref 来调用函数式合成器的函数？

Question

升级 React Native 0.60 后。我尝试将我所有的 class 组合更改为功能组合。对于我的动画，我喜欢使用合成器的方法（我知道它不是真正推荐的，但我更喜欢它而不是创建状态变量并将其作为道具传递...）。

例如，这是我的 class 组合物：

class Child extends PureComponent {
  animateOpen = () => {

  }
  render() {
    return (
      <View>
        {...}
      </View>
    );
  }
}

const PlayButton = ({ status, onPress }) => {
  const childRef = useRef(null);

  return (
    <View>
      <Button onPress={this.childRef.animateOpen} />
      <Child ref={childRef}/>
    </View >
  );
};

所以在这个例子中，我怎样才能将子组合体写成函数式组合体？

Answer 1

尝试使用this.childRef.current.animateOpen

Answer 2

作为功能组件的子组件：

const Child = () => {
  const animateOpen = () => {}

  return (
    <View>
      {...}
    </View>
  )
}

如何创建 ref 来调用函数式合成器的函数？

How create ref to call a function of a functional composant?

javascript

methods

ref

reactjs

react-native