Page Comparison

Procedure

...

1. Use Semantic-UI and Semantic-UI-React elements together

   I've checked it is possible to use both types of components together.  So, it could be possible to create new elements using Semantic-UI-React elements, and recode previous elements step by step when we have enough time.

   
   

2. Use only Semantic-UI-React elements

...

1. It is possible we have some problems due to our lack of consistency using semantic-ui and html elements, for example:
   • Some buttons added as <button>
   • Some buttons added as <div>
   • Some buttons added as <NavLink>
     Thus, perhaps will be difficult to us select the most appropriate element in order to get the same final layout.

2. Another possible problem is the use of the attribute “ref” in our react components. The documentation  (https://facebook.github.io/react/docs/refs-and-the-dom.html) explains that is needed to use it as a callback, and sometimes it is not used in that way in our platform. Seems that new react-semantic-ui doesn’t support the old way. For example:

   Code Block
   language xml
   {/*Old way*/} <div className=”ui inverted menu ” ref=”header”> {/* New way*/} <div className=”ui inverted menu ” ref={(header)=>{this.headerMenu=header}}>

   
    

...