reactjs - React中HOC封装的组件的访问功能

Question

我有一个名为 withBackgroundAndAnimation 的 HOC，它渲染组件背景(用户可以将视频或图像设置为背景)，因为它经常重复。

对于这个问题，请看一下相关的 3 个组成部分:

ViewManager - 我的顶级组件，用于管理实际事件的选项卡。

|

withBackgroundAndAnimation - 通过为组件提供正确的背景来增强组件的 HOC。

|

PinlockComponent - 应用初始化且用户必须输入 4 位 PIN 码时显示的组件。

正如您所想，我正在使用 withBackgroundAndAnimation 来增强 PinlockComponent。

这就是我遇到麻烦的地方:

当用户正确输入 4 位 PIN 码时，将调用 onCorrectPin 属性方法，并且 ViewManager 将删除 PinlockComponent 。现在我遇到了 HOC 的问题，似乎无法访问 WrappedComponents 方法回调。

我怎样才能实现这个目标？

代码

export const withBackgroundAndMountingAnimation = WrappedComponent => {
  class WrapperComponent extends React.PureComponent {
    constructor(props) {
      super(props)
      this.state = {
        opacityValue: new Animated.Value(0),
      }
    }

    componentDidMount() {
      return Animated.timing(
        this.state.opacityValue, 
        {
          toValue: 1,
          duration: 300,
          easing: Easing.ease,
          isInteraction: false,
          useNativeDriver: true,
        }
      ).start();
    }

    componentWillUnmount() {
      return Animated.timing(
        this.state.opacityValue, 
        {
          toValue: 0,
          duration: 100,
          easing: Easing.ease,
          isInteraction: false,
          useNativeDriver: true,
        }
      ).start();
    }

    ...

    render() {
      const { settings } = this.props
      const { backgroundOpacity } = this.props.settings.layoutCategory

      if (settings.backgroundCategory.isBackgroundUsingVideo && !Video) {
        Video = require('react-native-video').default
      } else if (!FastImage) {
        FastImage = require('react-native-fast-image').default
      }

      return (
        <View style={styles.flex1}>
          <Animated.View style={[styles.flex1, { opacity: this.state.opacityValue }]}>
            {this.renderVideo()}

            <WrappedComponent {...this.props}/>
          </Animated.View>
        </View>
      )
    }
  }

  const mapStateToProps = (state) => {
    return {
      settings: state.settings,
    };
  };

  return connect(mapStateToProps)(WrapperComponent);
}

Answer 1

问题似乎出在您的 ViewManager 而不是您的 HOC。根据评论，我假设您的 ViewManager 应该类似于:

const ViewManager = () => {
    const [locked, setLocked] = useState(true);
    const WrappedPinlock = withBackgroundAndMountingAnimation(PinlockComponent);

    return (
        <div>
            {locked && <WrappedPinlock onCorrectPin={() => setLocked(false)} />
            {!locked && <YourApp />}
        </div>
    )
};