0

如何使用 React Hook 在 Provider 中发送 ref，ExampleRef.current 返回 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 })

使用提供者

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

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

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

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

0 回答 0