React Ref
The Record API is in feature-freeze. For the newest features and better support going forward, please consider migrating to the new function components.
Not to be confused with Reason ref
, the language feature that enables mutation.
A ReasonReact ref
would be just another instance variable. You'd type it as ReasonReact.reactRef
if it's attached to a custom component, and Dom.element
if it's attached to a React DOM element.
REtype state = {
isOpen: bool,
mySectionRef: ref(option(ReasonReact.reactRef))
};
let setSectionRef = (theRef, {ReasonReact.state}) => {
state.mySectionRef := Js.Nullable.toOption(theRef);
/* wondering about Js.Nullable.toOption? See the note below */
};
let component = ReasonReact.reducerComponent("MyPanel");
let make = (~className="", _children) => {
...component,
initialState: () => {
isOpen: false,
mySectionRef: ref(None),
},
reducer: /* ... */,
render: (self) => <Section1 ref={self.handle(setSectionRef)} />
};
Attaching to a React DOM element looks the same: state.mySectionRef = {myDivRef: Js.Nullable.toOption(theRef)}
.
Note how ReactJS refs can be null. Which is why theRef
and myDivRef
are converted from a JS nullable to an OCaml option
(Some/None). When you use the ref, you'll be forced to handle the null case through a switch
, which prevents subtle errors!
You must follow the instanceVars convention in the previous section for ref.
ReasonReact ref only accept callbacks. The string ref
from ReactJS is deprecated.
We also expose an escape hatch ReasonReact.refToJsObj
of type ReasonReact.reactRef => Js.t {..}
, which turns your ref into a JS object you can freely use; this is only used to access ReactJS component class methods.
RElet handleClick = (event, self) =>
switch (self.state.mySectionRef^) {
| None => ()
| Some(r) => ReasonReact.refToJsObj(r)##someMethod(1, 2, 3) /* I solemnly swear that I am up to no good */
};