javascript - 如何创建 ref 来调用函数组件的函数？

Question

升级 React Native 0.60 后。 我尝试将所有类组件更改为功能组件。 对于我的动画，我喜欢使用 composant 的方法(我知道它并不真正推荐，但我更喜欢这样做，而不是创建一个状态变量并将其作为 Prop 传递......)。

例如，这是我的类(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 >
  );
};

那么在这个例子中，我怎样才能将 Child composant 写成函数式 composant 呢？

Answer 1

子组件作为功能组件:

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

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