A bit of a noobie question here but I have just started working with React and also in a large project and I've noticed that both class and className cannot be used on all elements and components. More specifically, custom components. This has forced me to put the className in a div container but this feels like a bad practice.
This is very strange behavior for me as I am coming from an Angular and Vue background where class or [class] can be placed on most anything and add classes to a component or element
What situations would cause class and className to not be allowed on a component/element in the template?
You can't use class keyword on JSX elements, this is one of few restrictions of jsx.
className error can be caused because of props and types. If you are using className on div, for example and it throws some error, means some package may not be installed, or if you are using react < 17, you forgot to import react module.
Could you be more specific, if you are using typescript and some ui library, like MUI? From what you are saying, it is hard to determine why className causes an error.
Related
In chisel, we should always extend from 'Module' to define our own module, right?
But, I can only find the definition of 'Module' at 'core/src/main/scala/chisel3/Module.scala' - it's a 'object'! We extend from an object? Or sth I've missed?
When you extend Module the class hierarchy looks like
Module <= abstract class LegacyModule. So it is a class. There is also a object Module that has apply methods that are used differently. BTW, having a good IDE like IntelliJ can make it much easier to navigate class hierarchies and figure out where things are coming from.
For fast searching elements by Selenium, I think it must be a simple way to set some attributes to html-elements, for example: transform React Component Key to data-attribute (if it is possible).
Of course I can writing id or data-attributes to my span, div and whatever in my components, but I can't do it with components of 3d-party libraries - this components may haven't props like "id", and I will have to wrap this components and then find they by tag or class...
Or maybe is plugin for webpack to set data-attributes to elements with component's names.
However, how you find elements in your react app render?
I think it's not a good idea find elements by class or tags
key transform like this:
<MyComponent key="SuperComponent" />
...
<div data-attr="SuperComponent">...</div>
or autoset attributes of component name like this:
<MySuperComponent />
...
<div data-attr="MySuperComponent">...</div>
From "Test Automation through Selenium" perspective it hardly matters if the HTML consists of id or data-attributes. While working with Selenium tests are written with the help of any effective <tag> and the associated attributes. However there is a preferred list of Locator Strategies as follows:
How to find elements in react app render?
The AUT (Application Under Test) being ReactJS based of-coarse the element will be having dynamic attributes. Locator Strategies can also be dynamic. You can find an example usage of Dynamic Locator Strategies in the discussion How to locate a button with a dynamicID
Finally, while Test Automation the fast moving WebDriver instance will be needed to be synchronized with the lagging browser. You can find a relevant discussion in Do we have any generic funtion to check if page has completely loaded in Selenium
We know we can extend an angular component but I would like to also extend the template associated. I mean, for instance, I could define an abstract component with its template with kind of skeleton, and then in the children would be forced to implements not only the abstract class methods and so on, but also the "empty gaps" of the skeleton html template.
Up to now, I have to completely redefine the template in the child.
I know that I could create another component but that a relatioship by association. It's annoying because I have to create an abstract class to be extend and then a component to redefine the template.
How do you do that?
Thank you in advance!
This is not possible. What could be useful to you is content projection
https://blog.angular-university.io/angular-ng-content/
I have a html page where I'm loading my directive
<kms-dir1></kms-dir1>
in that component 'kmsdir1.html' is loaded i.e templateUrl, I have defined everything and working fine, now I have a requirement to use one more directive (let's say kmsdir2) in that kmsdir1.html
In that kmsdir1 component I have specified directives and tried but it's not loading
So currently I have defined another directive also in parent page and using input and output params and making its visibility hidden and show.
Is there any alternative???? i.e to load a directive inside one more directive
FYI: I didn't see any error in console. Page itself is not getting loaded (Blank)
I would see two potential issues:
You don't define directives into the directives property of the component where you want to use them
The selectors you specify don't match any element in your component.
I was missing "#Injectable()" to the component which I wanted to use it as directive.. and my bad I was use *ng-If instead *ngIf :-p
I understood whenever page is getting completely blank and no error in console then there is error in your angular syntax.
I'm getting my feet wet with Polymer. I am wanting to create a stand-alone app that can be injected into multiple implementations. Like this:
Inside my-app element, I may also have many sub-elements. It's my understanding that every element needs to import polymer.html. Should all of the sub-elements rely upon the parent (root) element to import polymer.html?
Thanks for your help.
Write all imports out for every element, so they are standalone. During vulcanize, unnecessary imports are ignored. So it does not matter how many polymer imports you have.
You don't need to import polymer.html inside your elements. Just add it to the host page.
Inside your "main" element you can import all your sub elements or have all the imports inside one "elements.html" like the starter kit does.