Performing javascript initialisation with Kotlin React

JavaScript
1

When writing a React component using Kotlin JS and Semantic UI, some of the controls need to be initialised when the component is rendered using javascript. eg. recommended javascript code to initialise a dropdown using jQuery is documented at Dropdown | Semantic UI is as follows

$('.ui.dropdown').dropdown();

or in case of Tab | Semantic UI the tab is initialised as thus

$('.tabular.menu .item').tab();

What would be an appropriate way to initialise the same (trigger that javascript call) from within a react component?

I suspect the code will go into this function, but don’t know how to select a particular control and trigger js code on the same

    override fun componentWillMount() {
        // What goes here?
    }
2

I was able to get the above working thus

override fun componentDidMount() {
        js("$('.ui.menu .item').tab();")
    }

Is there any other way kotlinjs has to do selection of dom elements instead of the way I ended up using jquery $ function here?

3

don’t mix jquery and react, it is possible but has more problems than advantages.
Your solution with componentdidmount is at least not complete and most possibly plain wrong.

have you tried https://react.semantic-ui.com/introduction ?

4

Fair point. I had learnt react using the library mentioned. Was prototyping kotlin-react-semantic and did not wish to invest in the equivalent of kotlinx.html extensions for all the tags. As you suggested its best to use a layer which works appropriately with react virtual DOM.

In the solution I had, the only other issue I saw was the generic nature of selector (eg it would initialise all menu items). But what I am curious about is what else made it “most possibly plain wrong”?

5

React is about components, but your init code uses selector which is not bound in any way to component.
It will init any matching tags on page each time componentDidMount is called.

No deinit code in case componentWillUnmount.

tab() is managing tabs and tab contents via changing corresponding container tag’s classes. React has no idea about it. If you are “render()” them with react it may or may not update them itself in way jquery ui not expecting.

Depending on specific html tree there may be event interference between them. stopPropogation() may be extra tricky.

In general making component with jquery being actually well behaving component is extra tricky.