Question

我有一个名为withBackgroundAndAnimation的HOC，它可以将组件呈现为背景（用户可以将视频或图像设置为背景），因为它经常重复出现。

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

ViewManager-我的顶级组件，用于管理实际上处于活动状态的标签。

|

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

|

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

您可以想象，我正在使用withBackgroundAndAnimation来增强PinlockComponent。

这是我遇到问题的地方

当用户正确输入4位数密码时，将调用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>
    )
};

React中用HOC包装的组件的访问功能

1 个答案: