Calling functions in a React Component

Using the example from the Tutorial, imagine the <RgbaColorPicker /> component has a function to return some data as a string, which I want to call and get from Java.

With Lit Elements I would use the this.getElement().callJsFuntion(...) method. But how would I implement this within the ReactAdapterElement ?

Help is much appreciated!

React components don’t have functions to call since React is based on the “UI as a function of state” philosophy and a React component is just a render function that receives props. The typical way of manipulating React components is by passing updated state to them rather than through method calls.

In the tutorial example, the value of the selected color is passed back to the server through using setColor as the onChange handler. The component has not other API than color and onChange.

There are some more complex React components that publish a ref with functions that you can call. For such cases, the client-side integration could store the ref value as an instance field on the custom element (i.e. the class that extends ReactAdapterElement) and that same class could then expose an instance function delegating to the stored ref value and that function could be called from Java using the regular callJsFunction or executeJs mechanisms.

1 Like