useRef和古腾堡的createHigherOrderComponent

问题描述

我想在我的高阶组件中使用useRef钩子，但是refs需要转发才能在高阶组件中工作。但是，我正在wordpress的Gutenberg中工作，我不确定如何用Gutenberg的React.forwardRef实现createHigherOrderComponent。

这是古腾堡（Gutenberg）文档中的一个基本示例，进行了一些细微修改：

const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        const myRef = useRef()
        console.log(myRef.current)
        myRef.current = 'modified'
        return (
            <Fragment>
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody>
                        My custom control
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
},"withInspectorControl" );

理想情况下，myRef应该在第一次渲染后打印“修改过的”，但它只会打印“未定义”。

对于其他一些上下文，我的实际应用程序正在使用useEffect来查看一个保存了媒体ID的变量，当它发生更改时，它将进行ajax调用以提取媒体对象。但是，组件的设置方式在图像焦点每次更改时都会运行（这可能会发生很多）。因此，我只是使用useRefs来确保媒体ID确实在更改，以限制ajax请求。

感谢任何帮助或指导，谢谢。

更新：

我想出了一个使用类组件的解决方案，并观察componentDidUpdate函数中的更改，但是对于涉及useRef的解决方案，我将保持开放状态。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）