How can I insert properties and functions inside a ref? Like this example:
const MyComponent = () => {
const [loading, setLoading] = React.useState(false)
const onTest = () => 'works'
return (
<div {...props}>
)
}
Then I want to use the propertie loading and the function onTest that way:
const Test = () => {
const myRef = React.useRef()
React.useEffect(() => {
if (myRef.current)
alert('loading is ' + myRef.current.loading + ' function is ' + myRef.current.onTest())
})
return(
<MyComponent ref={myRef} />
)
}
How can I do that?
Answer
You cannot set ref on functional components because they don’t have an instance.
You may not use the ref attribute on function components because they don’t have instances.
(source: https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs)
To make your example working you need to convert <MyComponent /> to class component.
const Test = () => {
const myRef = React.useRef();
React.useEffect(() => {
if (myRef.current)
console.log(
"loading is " +
myRef.current.state.loading +
" function is " +
myRef.current.onTest()
);
});
return <MyComponent ref={myRef} />;
};
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false
};
}
onTest() {
return "works";
}
render() {
return <h1>MyComponent</h1>;
}
}
ReactDOM.render(<Test />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>