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

我有一个名为

的HOC，带有backgroundandanimation

，它可以渲染组件背景（用户可以将视频或图像设置为背景），因为它经常重复自身

对于此问题，请查看相关的3个组成部分：

ViewManager

-我的顶级组件，用于管理实际处于活动状态的选项卡

|

带有背景和动画

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

|

PinlockComponent

-当应用程序初始化且用户必须输入4位pin码时显示的组件

正如您所能想象的，我正在使用带有背景和动画的

来增强
pinlock组件

这就是我遇到的问题：

当用户正确输入4位pin时，将调用
onCorrectPin
prop方法，并且
ViewManager
将删除
pinlock组件。现在我遇到了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);
}

export const with background and mountinganimation=WrappedComponent=>{
类包装器组件扩展了React.PureComponent{
建造师（道具）{
超级（道具）
此.state={
opacityValue:新的动画值（0），
}
}
componentDidMount（）{
返回时间(
此.state.opacityValue，
{
toValue:1，
持续时间：300，
放松，放松，放松，
isInteraction:false，
useNativeDriver：没错，
}
).start（）；
}
组件将卸载（）{
返回时间(
此.state.opacityValue，
{
toValue:0，
持续时间：100，
放松，放松，放松，
isInteraction:false，
useNativeDriver：没错，
}
).start（）；
}
...
render（）{
const{settings}=this.props
const{backgroundOpacity}=this.props.settings.layoutCategory
if（settings.backgroundCategory.isBackgroundUsingVideo&&！Video）{
Video=require（'react-native-Video'）。默认值
}否则如果（！FastMage）{
FastImage=require（'react-native-fast-image'）。默认值
}
返回(
{this.renderVideo（）}
)
}
}
常量mapStateToProps=（状态）=>{
返回{
设置：state.settings，
};
};
返回连接（MapStateTops）（包装器组件）；
}
问题似乎出在您的
视图管理器上，而不是您的HOC。根据这些评论，我认为您的
视图管理器应该类似于：

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

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

const ViewManager=（）=>{
const[locked，setLocked]=useState（true）；
const WrappedPinlock=带有背景和安装动画（pinlock组件）；
返回(
{locked&&setLocked（false）}/>
{！已锁定&}
)
};
您正在使用的回调方法是什么？如何访问它？在“ViewManager会删除PinlockComponent”中，从prop调用
onCorrectPin
方法时遇到困难吗？这是怎么回事？@UtsavPatel，如果onCorrectPin输入成功与否，则有条件地呈现pinlock组件。@shubhamkhattri这是正确的@沃尔特蒙内克，请你再仔细想想。你没有收到道具。如何呈现WrappedComponent。你在用裁判吗？你看到什么错误了吗。到目前为止，几乎没有可供利用的信息