Question about ReactComponent ref

[jamesdbrock]

I wrote a ReactComponent adaptor for react-archer.

const ReactArcher = require('react-archer');
exports.reactArcherContainer = ReactArcher.ArcherContainer;

foreign import reactArcherContainer :: ReactComponent ArcherContainerProps

which I am rendering by element reactArcherContainer.

It's kind-of working, but my arrows don't re-render correctly after reconciliation. The react-archer docs say :

My arrows don't re-render correctly...

Try using the refreshScreen instance method on your ArcherContainer element. You can access it through the ref of the component.

So here's the refreshScreen instance method:

https://github.com/pierpo/react-archer/blob/a15d84fb8486ce8bc82898f6b042f86ac56c2883/src/ArcherContainer.js#L129

How would I call refreshScreen from Purescript? Is there a way to get a Ref to a ReactComponent instance? Am I even thinking about this the right way?

[jamesdbrock]

Okay so I solved my problem by correct application of key props, of course. I would still like to hear advice about how to call effectful foreign component instance methods, though, if anyone has any advice about that.

[maddie927]

It's not possible without doing most of it in FFI using react-basic, even though there is a Ref type defined here. react-basic-hooks is able to create and read from Refs using useRef and the read/write helpers. You would then be able to give the ref a type like cRef <- useRef null :: Ref (Nullable { refreshScreen :: Effect Unit }), use it in an event callback like this:

do
  c <- readRefMaybe cRef
  for_ c \{ refreshScreen } -> refreshScreen

[joprice]

Do you have an example of something like calling focus on a ref? I can't figure out how this is supposed to be setup, since there doesn't seem to be a "ref" property in the component props.

[maddie927]

All the React.Basic.DOM elements have a ref prop:

a = component "A" \_ -> React.do
  divRef <- useRef Nullable.null
  let focusDiv = do
        traverse focus $ HTMLElement.fromNode =<< readRefMaybe ref
  pure $ R.div { ref }

[joprice]

Sorry, I realized afterwards that react-basic-native is totally separate as far as the component's prop definitions. I'll open an issue there.

[maddie927]

Ahh yes, I'm not sure how refs work there