export function useControl(CompIn) {
const ref = useRef();
// 通过 proxy 实现支持各种方法名
const methods = useMemo(() => createMethodsProxy(ref), []);
const CompOut = useMemo(() => {
if (!CompIn) {
return null;
}
const ControlledComp = function ControlledComp(props) {
return <CompIn {...props} ref={ref} />;
};
if (process.env.NODE_ENV === 'development') {
const originalName = CompIn.displayName ?? CompIn.name ?? 'Unknown';
ControlledComp.displayName = `useControl(${originalName})`;
}
return ControlledComp;
}, [CompIn]);
return [CompOut, methods];
}
function createMethodsProxy(ref) {
return new Proxy(
{
$get(property) {
return ref.current?.[property];
},
},
{
get(target, property) {
if (target[property]) {
return target[property];
}
const method = async (...args) => {
const fn = ref.current?.[property];
const value = fn && await fn(...args);
return value;
};
target[property] = method;
return method;
},
}
);
}
useControl
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 人们问爱因斯坦为何能在1905年提出那么多改变人类认识世界的理论,他谦虚地回答道: “并不是我很聪明,只是我和问题...
- 国际黄金行情走势分析: 周一(3月8日)亚洲时段,现货黄金延续上周五纽约时段涨势,最高触及1714美元附近,目前交...
- 今天是小姐姐们的节日。 我老司机一次搞大以强悍忠诚的“女士用品”身份,在这里祝所有小姐姐们日进斗精。 如何用商业电...