How to send ref in Provider using React Hook, ExampleRef.current return null? Should return a DOM element with id Example1
create Context
const ExampleContext = React.createContext({});
This is Provider
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 })
Using Provider
class Example2 extends PureComponent<{...}> {
render() {
return(
<Example1.ExampleProvider>{...}<Example1.ExampleProvider>
)
}
};
If add DIV, ExampleRef.current returns the correct value, but I don't want to add DIV with another layer
return(
<div ref={ExampleRef}>
<ExampleContext.Provider value={ExampleRef.current}>
{children}
</ExampleContext.Provider>
</div>
);
