Javascript 如何使用React钩子在提供程序中发送ref

如何使用React钩子在提供程序中发送ref，例如ref.current return null？应返回id为Example1的DOM元素

创建上下文

const ExampleContext = React.createContext({});

这是提供商

const ExampleProvider = ({
 children
}:{
 children: React$Node
}) => {
 const ExampleRef = useRef(null)

 return(
  <ExampleContext.Provider ref={ExampleRef} value={ExampleRef.current}>
   {children}
  </ExampleContext.Provider>
 );
};

class Example1 extends PureComponent<{...}> {
 static ExampleProvider: any
 static contextType = ExampleContext;

 render() {
  return(<div id={Example1}>...</div>)
 }
};

Object.assign(Example1, { ExampleProvider })

const ExampleProvider=({
儿童
}:{
子节点：React$Node
}) => {
const ExampleRef=useRef（空）
返回(
{儿童}
);
};
类Example1扩展了PureComponent{
静态示例提供程序：任何
静态上下文类型=ExampleContext；
render（）{
返回（…）
}
};
赋值（例如1，{ExampleProvider}）

使用提供者

class Example2 extends PureComponent<{...}> {

 render() {
  return(
   <Example1.ExampleProvider>{...}<Example1.ExampleProvider>
  )
 }
};

类示例2扩展了PureComponent{
render（）{
返回(
{...}
)
}
};

如果添加DIV，ExampleRef.current将返回正确的值，但我不想在另一层中添加DIV

return(
 <div ref={ExampleRef}>
  <ExampleContext.Provider value={ExampleRef.current}>
   {children}
  </ExampleContext.Provider>
 </div>
 );

返回(
{儿童}
);

为什么要将Example1作为id传递而不定义它？您的意思是？：return（…）是的，您试图通过它来实现什么？Example1是一个覆盖整个页面的层。基于示例1，我想在页面上放置带有示例2的图层。因此，示例1返回什么并不重要。